false trackColor prop does not work for Switch component on iOS

Description

I’m trying to style the trackColor on a Switch component using something like this:

<Switch
  ...
  trackColor={{ true: 'blue', false: 'green' }}
/>

The true styling works, but the false one is ignored.

The best workaround I can find is to use the ios_backgroundColor prop, but for some reason that color is always darkened(?) so I can’t quite get the colors I want.

(do you think I should raise another issue for the color warping that happens with ios_backgroundColor?)

React Native version:

System:
    OS: macOS 10.15.3
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 644.72 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.7.0 - /usr/local/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.7 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.9.3 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 13.6, DriverKit 19.0, macOS 10.15, tvOS 13.4, watchOS 6.2
    Android SDK: Not Found
  IDEs:
    Android Studio: 3.5 AI-191.8026.42.35.6010548
    Xcode: 11.6/11E708 - /usr/bin/xcodebuild
  Languages:
    Java: 13.0.1 - /usr/bin/javac
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. Create a <Switch /> component with trackColor={{false: 'red'}}

Expected Results

The track color should match the supplied color when the switch state is false.

[gedeagas]

@mcraigie I can confirm that ios_backgroundColor always has the “darken” effect you stated. I suspect this is because the native ios switch seems too always reduce the opacity of the background color when the value is false. (CMMIW). cc @safaiyeh not sure on whether this is a bug or not.

And for your question about Switch not to automatically apply the false trackColor as the ios_backgroundColor when the platform is iOS i will hand it over to @yungsters as the original code author. After tinkering with the Switch component, the ios_backgroundColor props appear can only override the background color when the value is false. Because of this, I think @mcraigie suggestion seems to make sense. Loved to hear your opinion about this.

[gedeagas]

Hi @mcraigie yep you are correct that on iOS when the switch value is false, the track shrinks into the border. If you want to change the color of the background exposed by the shrunken track, you must use ios_backgroundColor. I think the main issue that you are facing here is about color warping that happens with ios_backgroundColor. https://reactnative.dev/docs/switch

Any snack expo or example repo could be very helpful to help debug this issue.