React-native: Switch component. thumbColor and trackColor do not work.

Created on 21 Feb 2019  路  6Comments  路  Source: facebook/react-native

馃悰 Bug Report

Switch component. New options thumbColor and trackColor do not work.

To Reproduce

According to documentation I use trackColor and thumbColor

            <Switch
              value={true}
              trackColor={'green'}
              thumbColor={'gray'}
            />

This removes warnings but does nothing with colors.

Okay, when I put deprecated option onTintColor and thumbTintColor back:

            <Switch
              value={true}
              onTintColor={'green'}
              thumbTintColor={'gray'}
            />

there are warnings, but colors are changed.

Expected Behavior

I expect code works well according to the docs: https://facebook.github.io/react-native/docs/switch#thumbcolor

Code Example

            <Switch
              value={true}
              trackColor={'green'}
              thumbColor={'gray'}
            />

Environment

React Native Environment Info:
System:
OS: macOS 10.14.3
CPU: (8) x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
Memory: 2.66 GB / 12.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 11.2.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
API Levels: 23, 25, 26, 27, 28
Build Tools: 23.0.1, 23.0.2, 25.0.2, 25.0.3, 26.0.2, 26.0.3, 27.0.0, 27.0.1, 27.0.3, 28.0.0, 28.0.2, 28.0.3
System Images: android-28 | Google APIs Intel x86 Atom
IDEs:
Android Studio: 3.2 AI-181.5540.7.32.5056338
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.6.3 => 16.6.3
react-native: 0.57.8 => 0.57.8
npmGlobalPackages:
react-native-cli: 2.0.1

Bug Switch Locked

Most helpful comment

Track color takes an object, not a single color: https://facebook.github.io/react-native/docs/switch#trackcolor
Snack: https://snack.expo.io/@jkcooper/rn-issue-#23570---switch-track-color

All 6 comments

It looks like you are using an older version of React Native. Please update to the latest release, v0.58 and verify if the issue still exists.

The "Resolution: Old Version" label will be removed automatically once you edit your original post with the results of running react-native info on a project using the latest release.

Now it is getting more clear. I tried to npm install latest version of react-native. Then my application was not able to build and run at all!

I bet it refers to some another react-native issue.
Updating react-native modules is common pain...

Can you clarify what your expected behavior is? It's not clear what exactly is not working as expected. Screenshots might help.

Track color takes an object, not a single color: https://facebook.github.io/react-native/docs/switch#trackcolor
Snack: https://snack.expo.io/@jkcooper/rn-issue-#23570---switch-track-color

Thanks @JKCooper2. Closing as working as expected.

Track color takes an object, not a single color: https://facebook.github.io/react-native/docs/switch#trackcolor
Snack: https://snack.expo.io/@jkcooper/rn-issue-#23570---switch-track-color

Thank you. It works!

Was this page helpful?
0 / 5 - 0 ratings