A quick note about trackColor and React Native

I ran into this issue when I was upgrading a React Native project this morning. I had some switches in my settings layout and previously I had been using the onTintColor prop. This prop is now deprecated and you have to use the trackColor prop instead, but it doesn't work exactly the same. You actually have to define it as an object, instead of just the color that you want.

Before you could define a Switch something like this:

Copycopy code to clipboard
1<Switch
2  value={this.props.switchValue}
3  onValueChange={this.props.onValueChange && this.props.onValueChange}
4  onTintColor="blue"
5  thumbColor="red"
6/>

But now you have to do it like this instead, with the new trackColor prop:

Copycopy code to clipboard
1<Switch
2  value={this.props.switchValue}
3  onValueChange={this.props.onValueChange && this.props.onValueChange}
4  trackColor={{ true: "blue", false: null }}
5  thumbColor="red"
6/>

Not very intuitive, but I suppose it makes sense because now you can define a color for when the switch is off too.