Change color of Switch while turning OFF react-native

Question

I am using react native switch component and I want to change the color of switch when I turn it OFF.

I can add onTintColor property to change the color when it is turned on.

Is there any way to change the color while turning it OFF?

Solution 1

onTintColor has been deprecated try the following.

  <Switch 
      trackColor={{true: 'red', false: 'grey'}}
      onValueChange={this.toggleSwitch}
      value={true}/>

this works

Solution 2

I've design switch with platform specific, also used border based on On Off status.

<Switch
trackColor={{ true: '#7ab8e1', false: Platform.OS=='android'?'#d3d3d3':'#fbfbfb'  }}
thumbColor={[Platform.OS=='ios'?'#FFFFFF':(item.status ?'#7ab8e1':'#ffffff')]}
ios_backgroundColor="#fbfbfb"
style={[item.status ?inline_styles.switchEnableBorder:inline_styles.switchDisableBorder]}
value={item.status}
onValueChange={() =>this.change_status(index)            }
/>

Inline border Style

const inline_styles = StyleSheet.create({
switchEnableBorder: {
borderColor: '#6fa6d3',
borderWidth: 1},

switchDisableBorder: {
borderColor: '#f2f2f2',
borderWidth: 1,  },});

Android OutPut : iOS Output :

Solution 3

Just add:

style={{backgroundColor: '#FF0000', borderRadius: 17}}

To the Switch

Solution 4

React native has ColorSwitchExample in their docs. You can refer the same here. Good luck!

class ColorSwitchExample extends React.Component {
  state = {
    colorTrueSwitchIsOn: true,
    colorFalseSwitchIsOn: false,
  };

  render() {
    return (
      <View>
        <Switch
          onValueChange={(value) => this.setState({colorFalseSwitchIsOn: value})}
          onTintColor="#00ff00"
          style={{marginBottom: 10}}
          thumbTintColor="#0000ff"
          tintColor="#ff0000"
          value={this.state.colorFalseSwitchIsOn} />
        <Switch
          onValueChange={(value) => this.setState({colorTrueSwitchIsOn: value})}
          onTintColor="#00ff00"
          thumbTintColor="#0000ff"
          tintColor="#ff0000"
          value={this.state.colorTrueSwitchIsOn} />
      </View>
    );
  }
}

Solution 5

For anyone coming from Google: Specifically for iOS, you'll need to use the ios_backgroundColor property:

<Switch ios_backgroundColor="red" trackColor={{ true: 'blue', false: 'red' }} />

References:

https://facebook.github.io/react-native/docs/switch.html#trackcolor

https://facebook.github.io/react-native/docs/switch#ios-backgroundcolor

View more solutions

Comments

[Rajeev Upadhyay]

@Ankush Rishi I don't think you can change the appearance of the switch when it is off but you change the strip color with tintColor and change circle color with thumbTintColor.

[Mihir]

@RajeevUpadhyay Did you run the example on their page? I can see the switch changing color after turning it off! Or am I missing something?

[Ankush Rishi]

@Mihir I want to change the background color, thumbTintColor will change the color of the slider only and tintColor will change the border color. Just like onTintColor is what I want when the switch is in Off mode

[Made in Moon]

On Android (react-native 0.61.5), it will give a green thumb-circle (which is bad)

[twelve17]

It's wild that Switch allows independent on/off colors for the trackColor, but not for the thumbColor, even though the thumb will have two different colors for on/off if you do not specify a custom color.

[jasie]

Please explain how your answer solves the problem. See How To Answer

[Menon Hasan]

when turning off in trackColor object false property trigger and color is chaged

[jasie]

Ha thanks, the explanation should go into your answer - just edit it :-)