diff --git a/src/__tests__/native/components.test.tsx b/src/__tests__/native/components.test.tsx index 31fcb84..f6bf8d1 100644 --- a/src/__tests__/native/components.test.tsx +++ b/src/__tests__/native/components.test.tsx @@ -1,4 +1,9 @@ -import { Button as RNButton, type ButtonProps } from "react-native"; +import { + Button as RNButton, + View as RNView, + type ButtonProps, + type ViewProps, +} from "react-native"; import { render } from "@testing-library/react-native"; import { copyComponentProperties } from "react-native-css/components/copyComponentProperties"; @@ -54,3 +59,30 @@ test("Component preserves props when mapping specifies 'target: false'", () => { expect(titleElement.props.style).toHaveLength(2); expect(titleElement.props.style[1]).toEqual({ color: "#ffa500" }); }); + +test("Component maps style onto a same-named prop when nativeStyleMapping uses the `true` shorthand", () => { + registerCSS(`.fill { background-color: red; }`); + + const mapping: StyledConfiguration = { + className: { + target: "style", + nativeStyleMapping: { + backgroundColor: true, + }, + }, + }; + + const Component = copyComponentProperties( + RNView, + (props: StyledProps) => { + return useCssElement(RNView, props, mapping); + }, + ); + + const result = render(); + + const renderedProps = result.getByTestId(testID).props; + + expect(renderedProps.backgroundColor).toBe("#f00"); + expect(renderedProps.style?.backgroundColor).toBeUndefined(); +}); diff --git a/src/native/styles/index.ts b/src/native/styles/index.ts index 9ac5cc4..934870c 100644 --- a/src/native/styles/index.ts +++ b/src/native/styles/index.ts @@ -504,7 +504,7 @@ function nativeStyleMapping( } let target = props; - const tokens = path.split("."); + const tokens = (typeof path === "string" ? path : key).split("."); const lastToken = tokens.pop(); for (const token of tokens) { target[token] ??= {};