Skip to content

feat(Android): update SwitchCompat to MaterialSwitch#56484

Open
adrcotfas wants to merge 1 commit intofacebook:mainfrom
adrcotfas:feat/md3_switch
Open

feat(Android): update SwitchCompat to MaterialSwitch#56484
adrcotfas wants to merge 1 commit intofacebook:mainfrom
adrcotfas:feat/md3_switch

Conversation

@adrcotfas
Copy link
Copy Markdown

@adrcotfas adrcotfas commented Apr 17, 2026

Summary:

The Android Switch has been using SwitchCompat, a Material Design 2 component from 2018 that produces a visually outdated toggle. This PR migrates it to Material Design 3's MaterialSwitch. A ContextThemeWrapper ensures correct MD3 rendering regardless of the host app's theme.
New Android-only props, consistent with the existing trackColor: {false, true} pattern:

  • thumbColorForTrue / thumbColorForFalse: per-state thumb color (thumbColor remains as an alias for seamless migration)
  • thumbIcon: {false?: string, true?: string}: per-state drawable resource shown inside the thumb
  • thumbIconTint: color tint for the thumb icon

Unspecified states fall back to Material theme attributes (colorPrimary, colorSurfaceContainerHighest, colorOnPrimary, colorOutline).

Changelog:

[ANDROID] [CHANGED] - Migrate Switch from the outdated MD2 SwitchCompat to MaterialSwitch (MD3)
[ANDROID] [ADDED] - Add thumbColorForTrue, thumbColorForFalse, and thumbIcon: {false?: string, true?: string} props to Switch for per-state thumb color and icon control on Android

Test Plan:

Tested on Android via rn-tester Switch examples:

  • All existing examples (on/off, disabled, custom colors, events) work without regressions
  • New MD3 example shows single-state (thumbIcon={{true: 'ic_check'}}) and dual-state (thumbIcon={{false: 'ic_close', true: 'ic_check'}}) icon usage
  • Android-only props are silently ignored on iOS
md3_switch.webm

@meta-cla meta-cla bot added the CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. label Apr 17, 2026
@github-actions
Copy link
Copy Markdown

Warning

JavaScript API change detected

This PR commits an update to ReactNativeApi.d.ts, indicating a change to React Native's public JavaScript API.

  • Please include a clear changelog message.
  • This change will be subject to additional review.

This change was flagged as: POTENTIALLY_BREAKING

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

Labels

CLA Signed This label is managed by the Facebook bot. Authors need to sign the CLA before a PR can be reviewed. Shared with Meta Applied via automation to indicate that an Issue or Pull Request has been shared with the team.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant