feat: made tapping on background toggle the switch (#13)

* feat: made tapping on background toggle the switch * Clean up some unused imports * Another clean up
thousight · May 23, 2019 · 8f32a68 · 8f32a68
1 parent bbb9cbc
commit 8f32a68
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 18 deletions.
diff --git a/src/Switch.test.tsx b/src/Switch.test.tsx
@@ -125,6 +125,13 @@ describe('Switch', () => {
       circleProps.onResponderRelease(fakeGestureEvent)
     })
 
+    it('can tap on the background without crash', () => {
+      rendered
+        .find('TouchableWithoutFeedback')
+        .first()
+        .simulate('press')
+    })
+
     it('can be dragged without crash', () => {
       const circleProps = rendered
         .find('AnimatedComponent')

diff --git a/src/Switch.tsx b/src/Switch.tsx
@@ -1,5 +1,11 @@
 import React, { Component } from 'react'
-import { View, Animated, Easing, Platform, PanResponder } from 'react-native'
+import {
+  View,
+  Animated,
+  Easing,
+  PanResponder,
+  TouchableWithoutFeedback,
+} from 'react-native'
 
 import { ISwitchProps, defaultProps } from './types'
 import styles from './styles'
@@ -106,6 +112,8 @@ export default class Switch extends Component<ISwitchProps> {
     }
   }
 
+  onBackgroundPress = () => this.toggle(!this.props.value)
+
   toggle = (newValue: boolean) => {
     const toValue = (newValue ? 1 : -1) * this.boundary
     return Animated.parallel([
@@ -149,23 +157,25 @@ export default class Switch extends Component<ISwitchProps> {
           },
         ]}
       >
-        <Animated.View
-          style={[
-            styles.activeBackground,
-            {
-              backgroundColor: disabled ? disabledColor : activeColor,
-              borderRadius: height,
-              opacity: Animated.divide(
-                circlePosition,
-                this.boundary,
-              ).interpolate({
-                inputRange: [0, 1],
-                outputRange: [0, 1],
-                extrapolate: 'clamp',
-              }),
-            },
-          ]}
-        />
+        <TouchableWithoutFeedback onPress={this.onBackgroundPress}>
+          <Animated.View
+            style={[
+              styles.activeBackground,
+              {
+                backgroundColor: disabled ? disabledColor : activeColor,
+                borderRadius: height,
+                opacity: Animated.divide(
+                  circlePosition,
+                  this.boundary,
+                ).interpolate({
+                  inputRange: [0, 1],
+                  outputRange: [0, 1],
+                  extrapolate: 'clamp',
+                }),
+              },
+            ]}
+          />
+        </TouchableWithoutFeedback>
 
         <Animated.View
           {...this.panResponder.panHandlers}