Skip to content

nativeStyleMapping crashes when value is boolean (path.split is not a function) #288

@clancywist

Description

@clancywist

Bug

nativeStyleMapping() in dist/module/native/styles/index.js crashes when a nativeStyleMapping config entry has a boolean value (true) instead of a string path.

Reproduction

Use text-center (or any class that produces textAlign) on a <TextInput>:

<TextInput className="text-center text-2xl text-white" />

Error:

TypeError: path.split is not a function (it is undefined)
  at index.js:329

Root cause

TextInput.js declares:

const mapping = {
  className: {
    target: "style",
    nativeStyleMapping: {
      textAlign: true  // <-- boolean, not a string
    }
  }
};

At line 322-329 of dist/module/native/styles/index.js:

for (const [key, path] of Object.entries(config.nativeStyleMapping)) {
  // ...
  const tokens = path.split(".");  // path is `true`, not a string → crash
}

Object.entries({ textAlign: true }) yields ["textAlign", true]. Then true.split(".") throws.

The same pattern exists in ActivityIndicator (color: true), ImageBackground (backgroundColor: true), and Button (color: true).

Suggested fix

const resolvedPath = typeof path === "string" ? path : key;
const tokens = resolvedPath.split(".");

When path is true, fall back to key as the prop name (same-name mapping).

Environment

  • react-native-css: 3.0.4
  • nativewind: 5.x
  • Expo SDK: 55
  • Platform: iOS (Expo Go simulator)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions