Switch View looks cut on my android(4.4.2).

[zyan-dev]

[allpwrfulroot]

Dive into the component's index.js in node_modules and change the padding set in the constructor:

this.padding = 6 // was originally 2

Did the trick for me, although I've only checked the results on one Android device and with my own custom switch:

<Switch
    buttonRadius={10}
    switchHeight={12}
    switchWidth={32}
   ...
  />

[Jazz747]

Yes, padding increase works only for this or similar setup.

For permanent fix (or I hope it is, tested on various dimensions), in node_modules/index.js change:

parent View that starts on line 201, in his style add:

 marginTop: this.props.buttonRadius/2,
 marginLeft: this.props.buttonRadius/2,

modify TouchableHighlight's width like so:

width: this.props.switchWidth+doublePadding+this.props.buttonRadius,

(add '+this.props.buttonRadius' to it)

and modify Animated.View's top and lett absolute values like so:

top: halfPadding + this.props.switchHeight/2 - this.props.buttonRadius/2,
left: this.props.switchHeight/2 > this.props.buttonRadius ? halfPadding : halfPadding + this.props.switchHeight/2 - this.props.buttonRadius/2,

(basically just add '/2' to the end.)

this makes the switch travel area and the button circle centered in container View instead of starting in the top left corner and should solve this issue. Since I'm new to the github mechanics of forking and pull requests and mostly lazy (:D), could someone who is working actively on this project test it out and introduce the changes? cheers