Skip to content

fix: handle boolean true in nativeStyleMapping#323

Open
danstepanov wants to merge 1 commit intomainfrom
fix/native-style-mapping-boolean
Open

fix: handle boolean true in nativeStyleMapping#323
danstepanov wants to merge 1 commit intomainfrom
fix/native-style-mapping-boolean

Conversation

@danstepanov
Copy link
Copy Markdown
Member

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

When nativeStyleMapping uses `true` (e.g. `textAlign: true`), the value
should be treated as the key name itself. Previously, `true.split(".")`
would throw a TypeError at runtime, breaking TextInput and
ImageBackground components that use this pattern.

Converts boolean `true` values to the key name during config creation
in useNativeCss so the runtime always receives strings.

Fixes #232
@YevheniiKotyrlo
Copy link
Copy Markdown
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[V5] - TextInput crashes when using "text-center" or "text-right" or "text-left" in NativeWind v5 (react-native-css: path.split is undefined)

2 participants