How to resize switch component in React Native?

Question

How to resize a switch component in React Native?

<Switch onValueChange={this._changeReciveNotice.bind(this)} value={this.state.isReciveNotice} style={{width:20,height:10}}/> 

this style code does not affect

Answer 1

You can resize the switch using the transform property of the style,

 <Switch value={true} style={{ transform: [{ scaleX: .8 }, { scaleY: .8 }] }} onValueChange={(value) => {}} /> 

Also, for best results, zoom values ​​are determined based on the screen size.

Answer 2

To expand on what has already been said, here's how you can handle screen sizes:

 import { moderateScale } from 'react-native-size-matters'; ... <Switch style={{ transform: [{ scaleX: moderateScale(1, 0.2) }, { scaleY: moderateScale(1, 0.2) }] }} /> 

Answer 3

  <View style={{ backgroundColor: this.state.value ? "rgba(81, 195, 157, 0.16)" : "rgba(204, 204, 204, 0.16)", borderRadius: 50, paddingVertical: 2, paddingHorizontal: 4 }} > <Switch tintColor="transparent" thumbTintColor={this.state.value ? "#51c39d" : "#cccccc"} onTintColor="transparent" value={this.state.value} style={{ transform: [{ scaleX: 1.3 }, { scaleY: 1.3 }] }} onValueChange={value => this.setState({ value })} /> </View> 

Answer 4

You must change the status value.

Exemple:

 <Switch onValueChange={(value) => this.setState({isReciveNotice: value})} style={{marginBottom: 10}} value={this.state.isReciveNotice} /> 

I do not think you can style the Switch component.