diff --git a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap index 08b0f893..b10a6da1 100644 --- a/src/components/Switch/__tests__/__snapshots__/index-test.js.snap +++ b/src/components/Switch/__tests__/__snapshots__/index-test.js.snap @@ -120,6 +120,7 @@ rn-userSelect:none" rn-flexShrink:0 rn-font:inherit + rn-left:0% rn-listStyle:none rn-marginTop:0px rn-marginRight:0px @@ -134,15 +135,12 @@ rn-userSelect:none" rn-position:relative rn-textAlign:inherit rn-textDecoration:none - + rn-transform:translateZ(0px) rn-transitionDuration:0.1s" style={ Object { - "WebkitTransform": "translateX(0%)", "backgroundColor": "#FAFAFA", "height": "20px", - "msTransform": "translateX(0%)", - "transform": "translateX(0%)", "width": "20px", } } /> @@ -296,6 +294,7 @@ rn-userSelect:none" rn-flexShrink:0 rn-font:inherit + rn-left:0% rn-listStyle:none rn-marginTop:0px rn-marginRight:0px @@ -310,14 +309,11 @@ rn-userSelect:none" rn-position:relative rn-textAlign:inherit rn-textDecoration:none - + rn-transform:translateZ(0px) rn-transitionDuration:0.1s" style={ Object { - "WebkitTransform": "translateX(0%)", "height": "20px", - "msTransform": "translateX(0%)", - "transform": "translateX(0%)", "width": "20px", } } /> @@ -472,6 +468,7 @@ rn-userSelect:none" rn-flexShrink:0 rn-font:inherit + rn-left:0% rn-listStyle:none rn-marginTop:0px rn-marginRight:0px @@ -486,15 +483,12 @@ rn-userSelect:none" rn-position:relative rn-textAlign:inherit rn-textDecoration:none - + rn-transform:translateZ(0px) rn-transitionDuration:0.1s" style={ Object { - "WebkitTransform": "translateX(0%)", "backgroundColor": "#FAFAFA", "height": "20px", - "msTransform": "translateX(0%)", - "transform": "translateX(0%)", "width": "20px", } } /> @@ -649,11 +643,12 @@ rn-userSelect:none" rn-flexShrink:0 rn-font:inherit + rn-left:100% rn-listStyle:none rn-marginTop:0px rn-marginRight:0px rn-marginBottom:0px - rn-marginLeft:0px + rn-minHeight:0px rn-minWidth:0px rn-paddingTop:0px @@ -663,15 +658,13 @@ rn-userSelect:none" rn-position:relative rn-textAlign:inherit rn-textDecoration:none - + rn-transform:translateZ(0px) rn-transitionDuration:0.1s" style={ Object { - "WebkitTransform": "translateX(100%)", "backgroundColor": "#009688", "height": "20px", - "msTransform": "translateX(100%)", - "transform": "translateX(100%)", + "marginLeft": "-20px", "width": "20px", } } /> diff --git a/src/components/Switch/index.js b/src/components/Switch/index.js index 3a045ea7..acab89bf 100644 --- a/src/components/Switch/index.js +++ b/src/components/Switch/index.js @@ -91,7 +91,6 @@ class Switch extends Component { { backgroundColor: thumbCurrentColor, height: thumbHeight, - transform: [ { translateX: value ? '100%' : '0%' } ], width: thumbWidth }, disabled && styles.disabledThumb @@ -111,7 +110,16 @@ class Switch extends Component { return ( - + {nativeControl} ); @@ -162,8 +170,15 @@ const styles = StyleSheet.create({ alignSelf: 'flex-start', borderRadius: '100%', boxShadow: thumbDefaultBoxShadow, + left: '0%', + transform: [ + { translateZ: 0 } + ], transitionDuration: '0.1s' }, + thumbOn: { + left: '100%' + }, disabledThumb: { backgroundColor: '#BDBDBD' },