ThumbColor of Switch not working when switch is true when running app on Web.

Description

The provided thumbColor of the Switch component is not visible when the switch is true on the web. It does work properly on Android and IOS

<Switch thumbColor={"blue"} value={isEnabled} onValueChange={setEnabled}/>

Switch value is true:

Switch value is false:

React Native version:

System: OS: Windows 10 10.0.18363 CPU: (8) x64 Intel® Core™ i5-8300H CPU @ 2.30GHz Memory: 1.14 GB / 7.74 GB Binaries: Node: 12.18.3 - C:\Program Files\nodejs\node.EXE Yarn: Not Found npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD Watchman: Not Found SDKs: Android SDK: Not Found Windows SDK: Not Found IDEs: Android Studio: Not Found Visual Studio: 16.7.30523.141 (Visual Studio Community 2019) Languages: Java: Not Found Python: 3.8.5 npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: https://github.com/expo/react-native/archive/sdk-39.0.3.tar.gz => 0.63.2 react-native-windows: Not Found npmGlobalPackages: react-native: Not Found

Steps To Reproduce

1. Create a Switch component from react-native and provide it a thumbColor
2. Run the app on the web and see that the color is not visible when the value of the switch is true.

Expected Results

The provided thumbColor should be visible when the switch is enabled. Not only when it is disabled.

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/BY!WFj97J

[rickyplouis]

I ran into the same issue and found out that on react-native-web the Switch component has an activeThumbColor prop that is not in react native. Defer to the react native web docs below for implementation.

http://necolas.github.io/react-native-web/docs/?path=/docs/components-switch--active-thumb-color

[fuelkoy]

This problem can be fixed with activeThumbColor prop which @rickyplouis pointed out. Set inactive thumbColor in thumbColor prop and active thumbColor in activeThumbColor prop.

Code: thumbColor={ !active ? 'yellow' : undefined} //@ts-expect-error type activeThumbColor={'red'}

@ts-expect-error is there for activeThumbColor because prop is not recognized even it works.

Here are pictures of given props in action inactive: active: