title: How to change the width of react-native switch component
body: <p>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</p>
  <p><a href="https://i.stack.imgur.com/PexmG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PexmG.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/GYKVy.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GYKVy.png" alt="enter image description here" /></a></p>
  <pre><code>                &lt;View style={ModalStyles.SwitchView}&gt;
                      &lt;Text style={ModalStyles.SwitchText}&gt;Yes&lt;/Text&gt;
                      &lt;Switch
                          style={ModalStyles.Switch}
                          trackColor={{ false: &quot;#81b0ff&quot;, true: &quot;#767577&quot; }}
                          thumbColor={this.state.wasOnParty ? &quot;#f4f3f4&quot; : &quot;#f5dd4b&quot;}
                          ios_backgroundColor=&quot;#3e3e3e&quot;
                          onValueChange={this.toggleSwitch}
                          value={this.state.wasOnParty}
                      /&gt;
                      &lt;Text style={ModalStyles.SwitchText}&gt;No&lt;/Text&gt;
                  &lt;/View&gt;
  
  SwitchView: {
      flexDirection: &quot;row&quot;,
  },
  Switch: {
      margin: 20,
      width: &quot;35%&quot;,
      transform:[{ scaleX: 1.0 }, { scaleY: 1.0 }]
  },
  SwitchText: {
      textAlign: &quot;center&quot;,
      marginTop: &quot;auto&quot;,
      marginBottom: &quot;auto&quot;,
      fontSize: 16
  }
  </code></pre>