styled() takes a null or false mapping entry, a null mapping and a string nativeStyleMapping without its Invalid mapping error #559

Before submitting a new issue

• I tested using the latest version of the library, as the bug might be already fixed.
• I tested using a supported version of react native.
• I checked for possible duplicate issues, with possible answers.

Bug summary

mappingToConfig in src/native/react/useNativeCss.ts throws styled(): Invalid mapping for ${key}: ${value} for a value it cannot map, but typeof value === "object" admits null, and the native style mapping it builds keeps any entry and takes a string's characters as entries. The types reject each value below, so it is what JavaScript or an any passes: an entry of null or false reaches path.split(".") in the native style mapping at render, a null mapping throws a TypeError from styled(), and a string nativeStyleMapping maps nothing.

#323, for #288 and #348, maps a true entry to its key.

Library version

main at df32ce3

Environment info

System:
  OS: Windows 11 10.0.26300
  CPU: "(32) x64 AMD Ryzen 9 9950X3D 16-Core Processor          "
  Memory: 160.57 GB / 255.67 GB
Binaries:
  Node:
    version: 26.12.1
    path: C:\Program Files\nodejs\node.EXE
  Yarn:
    version: 4.9.2
    path: C:\Users\<user>\AppData\Roaming\npm\yarn.CMD
  npm:
    version: 12.2.1
    path: C:\Program Files\nodejs\npm.CMD
  Watchman: Not Found
SDKs:
  Android SDK: Not Found
  Windows SDK:
    AllowDevelopmentWithoutDevLicense: Enabled
    Versions:
      - 10.0.19041.0
      - 10.0.26100.0
IDEs:
  Android Studio: AI-262.9437.185.2621.16467767
  Visual Studio: Not Found
Languages:
  Java:
    version: 17.0.20.1
    path: C:\Program Files\Microsoft\jdk-17.0.20.101-hotspot\bin\javac.EXE
  Ruby: Not Found
npmPackages:
  "@react-native-community/cli": Not Found
  react:
    installed: 19.2.3
    wanted: 19.2.3
  react-native:
    installed: 0.86.3
    wanted: 0.86.3
  react-native-windows: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: Not found
  newArchEnabled: Not found
iOS:
  hermesEnabled: Not found
  newArchEnabled: Not found

Steps to reproduce

1. Clone the reproducer branch, which is main at df32ce3 with two files added, src/__tests__/native/styled-invalid-mapping.test.tsx and reproduce.sh:

   git clone --branch repro/styled-mapping-invalid-values https://github.com/YevheniiKotyrlo/react-native-css
   cd react-native-css

2. Run ./reproduce.sh. It runs yarn install --immutable and the test, and ends with one line: DEFECT: … and exit status 1 while any of the four mappings gets past styled(), FIXED: … and 0 once all four are refused, ERROR: … and 2 when the install fails or a case fails another way.

src/__tests__/native/styled-invalid-mapping.test.tsx:

import { View } from "react-native";

import { styled } from "react-native-css";

test.each([
  [
    "an entry set to null",
    { className: { target: "style", nativeStyleMapping: { color: null } } },
  ],
  [
    "an entry set to false",
    { className: { target: "style", nativeStyleMapping: { color: false } } },
  ],
  ["a mapping set to null", { className: null }],
  [
    "a nativeStyleMapping set to a string",
    {
      className: { target: "style", nativeStyleMapping: "accessibilityLabel" },
    },
  ],
])("%s fails at styled() with its Invalid mapping error", (_, mapping) => {
  expect(() => styled(View, mapping as never)).toThrow(
    "styled(): Invalid mapping for className",
  );
});

Expected: styled() fails with its styled(): Invalid mapping for className error for each of the four, as it already does for a value of any other type, and every mapping it takes today keeps working. The script ends with FIXED: 4 of 4 cases pass and exits 0.

Actual: it throws nothing for three of them, and Cannot read properties of null (reading 'nativeStyleMapping') for the null mapping; the script ends with this line and exits 1:

DEFECT: styled() takes an invalid mapping without its Invalid mapping error: 4 of 4 cases show it: an entry set to null fails at styled() with its Invalid mapping error; an entry set to false fails at styled() with its Invalid mapping error; a mapping set to null fails at styled() with its Invalid mapping error; a nativeStyleMapping set to a string fails at styled() with its Invalid mapping error

System: MINGW64_NT-10.0-26300 3.6.10-5a1665c8.x86_64, Node v26.12.1, Yarn 4.9.2, react-native-css 4962d60
yarn install --immutable: done
FAIL src/__tests__/native/styled-invalid-mapping.test.tsx (76.487 s)
  × an entry set to null fails at styled() with its Invalid mapping error (3 ms)
  × an entry set to false fails at styled() with its Invalid mapping error
  × a mapping set to null fails at styled() with its Invalid mapping error (30 ms)
  × a nativeStyleMapping set to a string fails at styled() with its Invalid mapping error (1 ms)
  ● an entry set to null fails at styled() with its Invalid mapping error
    Expected substring: "styled(): Invalid mapping for className"
    Received function did not throw
  ● an entry set to false fails at styled() with its Invalid mapping error
    Expected substring: "styled(): Invalid mapping for className"
    Received function did not throw
  ● a mapping set to null fails at styled() with its Invalid mapping error
    Expected substring: "styled(): Invalid mapping for className"
    Received message:   "Cannot read properties of null (reading 'nativeStyleMapping')"
  ● a nativeStyleMapping set to a string fails at styled() with its Invalid mapping error
    Expected substring: "styled(): Invalid mapping for className"
    Received function did not throw
Test Suites: 1 failed, 1 total
Tests:       4 failed, 4 total
jest: ran src/__tests__/native/styled-invalid-mapping.test.tsx
DEFECT: styled() takes an invalid mapping without its Invalid mapping error: 4 of 4 cases show it: an entry set to null fails at styled() with its Invalid mapping error; an entry set to false fails at styled() with its Invalid mapping error; a mapping set to null fails at styled() with its Invalid mapping error; a nativeStyleMapping set to a string fails at styled() with its Invalid mapping error

Reproducible example repository

https://github.com/YevheniiKotyrlo/react-native-css/tree/repro/styled-mapping-invalid-values