fix: handle boolean true in nativeStyleMapping

[danstepanov]

Summary

• nativeStyleMapping allows true as a value (e.g. textAlign: true on TextInput, backgroundColor: true on ImageBackground), meaning "extract this property from style and set it as a prop with the same name"
• The runtime called path.split(".") which throws TypeError on boolean true
• Fixed by converting true to the key name during config creation in useNativeCss, so the runtime always receives strings

Test plan

• Added 3 tests: boolean mapping extracts prop, works alongside other styles, works on custom styled() components
• Full suite passes (1043 passed, 0 failures)

Fixes #232
Supersedes #251

[YevheniiKotyrlo]

Thanks for picking this up! One small thing that might be worth an extra test: src/components/ImageBackground.tsx also uses the true form (backgroundColor: true), so the same crash reproduces on <ImageBackground className="bg-*">, not just TextInput. Issue #232 only mentioned TextInput, and the tests here cover TextInput + a custom styled() — adding an ImageBackground case would lock in the second shipped wrapper that hits this path.

[5ZYSZ3K]

Hi, what is the state of this PR? I just ran into that issue

[5ZYSZ3K]

Specifically, it breaks, when I try to use TextInput. I see here: https://github.com/nativewind/react-native-css/blob/b5f2a4d5db480fdb8e8b95b3bd790d9d27b2dd17/src/components/TextInput.tsx, that you are using the following mapping:

const mapping: StyledConfiguration<typeof RNTextInput> = {
  className: {
    target: "style",
    nativeStyleMapping: {
      textAlign: true,
    },
  },
};

And true value isn't really supported - using TextInput is not possible

[5ZYSZ3K]

What's interesting, I see the issue caused by this only when i pass text-center as a className to TextInput. I see the following error then:

 ERROR  [TypeError: path.split is not a function (it is undefined)] 

Code: base.tsx
  28 | export const BaseTextInput = forwardRef(
  29 |   ({ children, className, ...props }: BaseTextInputProps, ref: ForwardedRef<ReactNativeTextInput>) => {
> 30 |     return <ReactNativeTextInput className={`font-boston ${className}`}></ReactNativeTextInput>;
     |            ^
  31 |   },
  32 | );
  33 | BaseTextInput.displayName = "BaseTextInput";