How to change the switch component's size in React Native?

React Native

React Native Problem Overview


How to change the switch component's size in React Native?

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

this style code doesn't effect

React Native Solutions


Solution 1 - React Native

You can resize the switch by using transform property from styling,

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

also for best result determine scaling values based on screen dimension.

Solution 2 - React Native

To expand on what was already said, this is 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) }] }} />

Solution 3 - React Native

If the size is a UI concern only you can add a negative margin

For example on my case i would just reduce the height (a little) to keep things aligned:

<Switch style={{marginVertical: -8}} />

Solution 4 - React Native

        <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>

Solution 5 - React Native

You must change the state value.

exemple:

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

I do not think you can stylize a Switch component.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionalucard.gView Question on Stackoverflow
Solution 1 - React NativeEltaf HussainView Answer on Stackoverflow
Solution 2 - React NativeTacoEaterView Answer on Stackoverflow
Solution 3 - React NativeLaurentView Answer on Stackoverflow
Solution 4 - React NativeEmad HajjarView Answer on Stackoverflow
Solution 5 - React NativeAlexandre TeixeiraView Answer on Stackoverflow