From 8da91f2f2c3c15c9dda53f5e73265ef1d258e736 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Richard=20Fe=CC=81vrier?= <richard@fevrier.io>
Date: Fri, 31 Jul 2020 10:55:46 +0200
Subject: [PATCH] Add 'horizontal' property

---
 index.d.ts    |  1 +
 lib/Switch.js | 31 ++++++++++++++++---------------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/index.d.ts b/index.d.ts
index 66cee34..e2a59d5 100644
--- a/index.d.ts
+++ b/index.d.ts
@@ -30,6 +30,7 @@ declare module 'react-native-switch' {
     switchRightPx?: number;
     switchWidthMultiplier?: number;
     switchBorderRadius?: number;
+    horizontal?: boolean;
   }
 
   export class Switch extends Component<SwitchProps> {}
diff --git a/lib/Switch.js b/lib/Switch.js
index c4ccc20..ef98f4d 100644
--- a/lib/Switch.js
+++ b/lib/Switch.js
@@ -39,7 +39,8 @@ export class Switch extends Component {
     switchLeftPx: PropTypes.number,
     switchRightPx: PropTypes.number,
     switchWidthMultiplier: PropTypes.number,
-    switchBorderRadius: PropTypes.number
+    switchBorderRadius: PropTypes.number,
+    horizontal: PropTypes.bool
   };
 
   static defaultProps = {
@@ -68,6 +69,7 @@ export class Switch extends Component {
     switchRightPx: 2,
     switchWidthMultiplier: 2,
     switchBorderRadius: null,
+    horizontal: true,
     testID: null
   };
 
@@ -78,8 +80,8 @@ export class Switch extends Component {
       value: props.value,
       transformSwitch: new Animated.Value(
         props.value
-          ? props.circleSize / props.switchLeftPx
-          : -props.circleSize / props.switchRightPx
+          ? props.circleSize / props.switchLeftPx * (props.horizontal ? 1 : -1)
+          : -props.circleSize / props.switchRightPx * (props.horizontal ? 1 : -1)
       ),
       backgroundColor: new Animated.Value(props.value ? 75 : -75),
       circleColor: new Animated.Value(props.value ? 75 : -75),
@@ -129,8 +131,8 @@ export class Switch extends Component {
     Animated.parallel([
       Animated.spring(this.state.transformSwitch, {
         toValue: value
-          ? this.props.circleSize / this.props.switchLeftPx
-          : -this.props.circleSize / this.props.switchRightPx
+          ? this.props.circleSize / this.props.switchLeftPx * (this.props.horizontal ? 1 : -1)
+          : -this.props.circleSize / this.props.switchRightPx * (this.props.horizontal ? 1 : -1)
       }),
       Animated.timing(this.state.backgroundColor, {
         toValue: value ? 75 : -75,
@@ -177,6 +179,7 @@ export class Switch extends Component {
       renderInsideCircle,
       switchWidthMultiplier,
       switchBorderRadius,
+      horizontal,
       value,
       ...restProps
     } = this.props;
@@ -204,8 +207,8 @@ export class Switch extends Component {
             containerStyle,
             {
               backgroundColor: interpolatedColorAnimation,
-              width: circleSize * switchWidthMultiplier,
-              height: barHeight || circleSize,
+              width: horizontal ? circleSize * switchWidthMultiplier : barHeight || circleSize,
+              height: horizontal ? barHeight || circleSize : circleSize * switchWidthMultiplier,
               borderRadius: switchBorderRadius || circleSize
             }
           ]}
@@ -214,8 +217,9 @@ export class Switch extends Component {
             style={[
               styles.animatedContainer,
               {
-                left: transformSwitch,
-                width: circleSize * switchWidthMultiplier
+                top: horizontal ? 0 : transformSwitch,
+                left: horizontal ? transformSwitch : 0,
+                width: horizontal ? circleSize * switchWidthMultiplier : barHeight || circleSize,
               },
               outerCircleStyle
             ]}
@@ -258,15 +262,12 @@ export class Switch extends Component {
 
 const styles = StyleSheet.create({
   container: {
-    width: 71,
-    height: 30,
-    borderRadius: 30,
-    backgroundColor: "black"
+    backgroundColor: "black",
+    justifyContent: "center",
+    alignItems: "center"
   },
   animatedContainer: {
     flex: 1,
-    width: 78,
-    flexDirection: "row",
     justifyContent: "center",
     alignItems: "center"
   },