Change color of Switch while turning OFF react-native
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 :
Just add:
style={{backgroundColor: '#FF0000', borderRadius: 17}}
To the Switch
onTintColor has been deprecated try the following.
<Switch
trackColor={{true: 'red', false: 'grey'}}
onValueChange={this.toggleSwitch}
value={true}/>
this works