How to change the colour of the Switch thumb in React Native

user_17446683 0
Viewed 217

I have this Switch in my app, on iPhone it is displaying correctly, with a white thumb regardless of whether the switch is on or off. However, on web, when the switch is on, it is this blue colour, that is defined nowhere in my app. I cannot figure out how to override it.

<Switch
       trackColor={{ false: colours.darkGrey, true: colours.primary }}
       ios_backgroundColor={colours.darkGrey}
       thumbColor={colours.white}
       onValueChange={toggleSwitch}
       value={notificationEnabled}
       style={styles.switch}
/>

The switch switch style:

switch: {
    transform: [{ scaleX: 0.7 }, { scaleY: 0.7 }],
  },

I am not too bothered that the shapes are not the same, but the colours should match.

enter image description here

enter image description here

toggleswitch react-native reactjs uiswitch user-interface
1 Answers

It turns out the Switch component when used via React Native Web has different props that aren't defined in the types.

To fix your specific issue you will also need to provide the prop activeThumbColor={colours.white}

For more info, see: https://necolas.github.io/react-native-web/docs/switch/

user_8425060
Related