fix: handle boolean shorthand in nativeStyleMapping

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<typeof RNView> = {
+    className: {
+      target: "style",
+      nativeStyleMapping: {
+        backgroundColor: true,
+      },
+    },
+  };
+
+  const Component = copyComponentProperties(
+    RNView,
+    (props: StyledProps<ViewProps, typeof mapping>) => {
+      return useCssElement(RNView, props, mapping);
+    },
+  );
+
+  const result = render(<Component testID={testID} className="fill" />);
+
+  const renderedProps = result.getByTestId(testID).props;
+
+  expect(renderedProps.backgroundColor).toBe("#f00");
+  expect(renderedProps.style?.backgroundColor).toBeUndefined();
+});

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] ??= {};