React-native: [RN 0.57.0] Warning: Switch: onTintColor is deprecated, use trackColor instead (but trackColor does not exist)

[reilem]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Memory: 30.88 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.6.1 - ~/.nvm/versions/node/v9.6.1/bin/node
Yarn: 1.9.4 - ~/.nvm/versions/node/v9.6.1/bin/yarn
npm: 6.4.0 - ~/.nvm/versions/node/v9.6.1/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
IDEs:
Android Studio: 3.1 AI-173.4907809
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.0 => 0.57.0
npmGlobalPackages:
react-native-cli: 2.0.1

Description

I just upgraded to 0.57.0 and am getting a warning whenever I use a Switch with the onTintColor property. The yellow box complains that onTintColor is deprecated and that I need to use trackColor. However, when I use trackColor the color property is not passed to the switch and the switch's color does not change.

Reproducible Demo

Init a project and use a Switch component with a onTintColor. E.g.:

<Switch
    onTintColor={"blue"}
    value={true}
/>

You will get notified that onTintColor is deprecated and the switch will have a blue "on" color. Now when you use this code:

<Switch
    trackColor={"blue"}
    value={true}
/>

You will no longer be notified of a deprecated property but the switch will not change color. Also if you are using typescript you will be notified that this property does not exist.

[react-native-bot]

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

The ":rewind: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.

[reilem]

So it turns out in the new update trackColor needs to be an object in the form of: {false: color, true: color}. So I had to write:

<Switch
    trackColor={{true: "blue", false: null}
    value={true}
/>

And that fixed my issue.

[rstims]

Although the documentation shows what the new value needs to look like it would be nice if the description for trackColor explicitly pointed it out or the prop could throw a warning that the propType is incorrect.

[isabelleaubron]

Also "thumbTintColor" warning indicates that it's deprecated ("use _thumbColor instead"), but documentation still use thumbTintColor (https://facebook.github.io/react-native/docs/next/switch#thumbtintcolor)

[ollydixon]

The Typescript definition for this has not been updated.
I get compiler errors for 57.0 saying the prop 'trackColor' doesn't exist on Switch. Stuck in catch 22 now.

[pascaloliv]

+1 @voidstarfire : same compiler error with RN 56 - I'll try to update to RN 57.

[Jakst]

@voidstarfire I did this to avoid typescript errors for now:

const props = { trackColor: { true: trackColor, false: null } }
return <Switch {...props} />

[ollydixon]

@Jakst thanks for the tip but I tend to avoid hacks otherwise the project gets full of them and when something is really failing because of some fundamental change your compiler can't help.

Perhaps I should do a PR for fixing the typings. (It's the only class lol epic fail)