How to change the width of react-native switch component

Viewed 1083

I need to change the width of react-native switch component, but the ring which is in the center does not move to the right side

enter image description here

enter image description here

                <View style={ModalStyles.SwitchView}>
                    <Text style={ModalStyles.SwitchText}>Yes</Text>
                    <Switch
                        style={ModalStyles.Switch}
                        trackColor={{ false: "#81b0ff", true: "#767577" }}
                        thumbColor={this.state.wasOnParty ? "#f4f3f4" : "#f5dd4b"}
                        ios_backgroundColor="#3e3e3e"
                        onValueChange={this.toggleSwitch}
                        value={this.state.wasOnParty}
                    />
                    <Text style={ModalStyles.SwitchText}>No</Text>
                </View>

SwitchView: {
    flexDirection: "row",
},
Switch: {
    margin: 20,
    width: "35%",
    transform:[{ scaleX: 1.0 }, { scaleY: 1.0 }]
},
SwitchText: {
    textAlign: "center",
    marginTop: "auto",
    marginBottom: "auto",
    fontSize: 16
}
0 Answers
Related