Switch thumb is green and I can't change it

[baptisteArno]

I implemented a simple Switch:

        <View style={{ flexDirection: "row", alignItems: "center" }}>
          <Text style={{ ...grotesk, marginRight: 5 }}>cm</Text>
          <Switch
            trackColor={{ false: blue, true: blue }}
            onValueChange={() =>
              setMeasurementUnits(
                measurementUnits === "inches" ? "centimeters" : "inches"
              )
            }
            value={measurementUnits === "inches"}
          />
          <Text style={{ ...grotesk, marginLeft: 5 }}>inches</Text>
        </View>

And the thumb color is green when the switch is enabled? I can't figure out how to change this.

[necolas]

See the docs https://necolas.github.io/react-native-web/docs/?path=/docs/components-switch--active-thumb-color

[paulwongx]

For people coming from Google, what you're looking for is activeThumbColor and probably implemented for web in such a way like

<Switch
    // ...your other switch props
    {...Platform.select({web: {
        activeThumbColor: "white"
    }})}
/>

Also, new link as of Nov 5, 2011: https://necolas.github.io/react-native-web/docs/switch/