Skip to content

fix: preserve component props when className.target is false#226

Merged
danstepanov merged 2 commits intonativewind:mainfrom
jamsch:fix/preserve-component-props
Feb 24, 2026
Merged

fix: preserve component props when className.target is false#226
danstepanov merged 2 commits intonativewind:mainfrom
jamsch:fix/preserve-component-props

Conversation

@jamsch
Copy link
Contributor

@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`

@danstepanov danstepanov force-pushed the fix/preserve-component-props branch from fc3dded to 760a167 Compare February 24, 2026 06:59
@danstepanov danstepanov self-assigned this Feb 24, 2026
@danstepanov danstepanov merged commit da5ce0f into nativewind:main Feb 24, 2026
6 checks passed
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

2 participants