Skip to content

Conversation

@jamsch
Copy link

@jamsch jamsch commented Nov 9, 2025

Closes #229

Summary of changes

If the mapping for className.target is configured to "false" (like the case of the Button override from RN), the component won't preserve the props.

Details

When importing the Button component from react-native, it loads the following file:

const mapping: StyledConfiguration<typeof RNButton> = {
className: {
target: false,
nativeStyleMapping: {
color: "color",
},
},
};
export const Button = copyComponentProperties(
RNButton,
(props: StyledProps<ButtonProps, typeof mapping>) => {
return useCssElement(RNButton, props, mapping);
},
);

Where the target: false mapping is passed through:
-> useCssElement
-> useNativeCss (mapped to config)
-> getStyledProps (state.configs[x])
-> deepMergeConfig
-> else block on if (config.target) { ... }:

https://github.com/nativewind/react-native-css/blob/008d479253365745acedef5a9602a7382f991597/src/native/styles/index.ts#L364C2-L367

which results in empty prop object for the Button if just using like the following:

import { Button } from "react-native";

function MyComponent() {
  return <Button title="foo" />
}

// throws an error: `Invariant Violation: The title prop of a Button must be a string`

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.

Button Invariant Violation: The title prop of a Button must be a string

1 participant