Skip to content

feat: add Switch thumb-* and track-* color utilities#1826

Open
patrickwehbe wants to merge 1 commit into
nativewind:mainfrom
patrickwehbe:patrickwehbe/switch-thumb-track-color
Open

feat: add Switch thumb-* and track-* color utilities#1826
patrickwehbe wants to merge 1 commit into
nativewind:mainfrom
patrickwehbe:patrickwehbe/switch-thumb-track-color

Conversation

@patrickwehbe

Copy link
Copy Markdown

What

Adds two custom utilities to theme.css:

  • thumb-* maps a color to the React Native Switch thumbColor prop
  • track-* maps a color to the React Native Switch trackColor prop

Both follow the same @prop pattern as the existing tint-* 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 to thumbColor / trackColor via @prop) matches what was suggested in the issue.

Tests

Added src/__tests__/switch.tsx covering thumb-black and track-black, following the existing test conventions. The full suite passes:

Test Suites: 8 passed, 8 total
Tests:       37 passed, 37 total

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

Copy link
Copy Markdown
Member

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

deferred (post-5.0) Not required for the 5.0 latest release; revisit after

Projects

None yet

Development

Successfully merging this pull request may close these issues.

v5: Add Switch thumbColor/trackColor prop mappings

2 participants