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

Question

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.

Answer 1

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/