feat: add Switch thumb-* and track-* color utilities#1826
Conversation
Map thumb-* and track-* to the React Native Switch thumbColor and trackColor props via @prop, mirroring the existing tint-* utility. These utilities existed in v4 but were missing in v5. Closes nativewind#1757
|
Preemptive review to help triage for the 5.0 release, @marklawlor makes the final call. Right intent and right place, but this doesn't work as written. The @prop at rule was renamed @nativeMapping in react-native-css 3.0.0 and the compiler silently ignores @prop now, so the color lands in style.thumbColor which Switch ignores, and the tests assert exactly that broken output. Also trackColor on RN Switch is an object with false and true keys, not a flat color, so it needs the nested paths trackColor.true and trackColor.false, which @nativeMapping supports. Swap @prop for @nativeMapping, map the track keys, and update the tests to assert top level props like @prop.tsx does. Separate heads up, the existing tint utilities in theme.css use the same dead @prop line, so tint-* looks broken on main today too. Filed as #1837. |
What
Adds two custom utilities to
theme.css:thumb-*maps a color to the React Native SwitchthumbColorproptrack-*maps a color to the React Native SwitchtrackColorpropBoth follow the same
@proppattern as the existingtint-*utility, reading the value from--color-*.Why
Fixes #1757. v4 provided
thumb-*utilities and track color values for styling the Switch component, and these were not listed in the migration guide as intentionally removed. This restores that behavior in v5. The mapping approach (color tothumbColor/trackColorvia@prop) matches what was suggested in the issue.Tests
Added
src/__tests__/switch.tsxcoveringthumb-blackandtrack-black, following the existing test conventions. The full suite passes: