feat: 🔥 Updated Example Project

timelessco · Aug 29, 2020 · 6a0e016 · 6a0e016
1 parent e6c7522
commit 6a0e016
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 15 deletions.
diff --git a/example/RNSwitchExample/App.js b/example/RNSwitchExample/App.js
@@ -1,21 +1,37 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {SafeAreaView, StatusBar, StyleSheet, Text, View} from 'react-native';
 import RNSwitch from './src/Switch';
 
-const App: () => React$Node = () => {
+const App = () => {
+  const [switchState, setSwitchState] = useState(false);
+  const handleOnPressSwitch = (value) => {
+    setSwitchState(value);
+  };
   return (
     <>
       <StatusBar barStyle="dark-content" />
       <SafeAreaView style={styles.container}>
         <Text style={styles.header}>React Native Reanimated Switch</Text>
         <Text style={styles.header}>Default </Text>
-        <RNSwitch handleOnPress={() => {}} />
+        <RNSwitch handleOnPress={handleOnPressSwitch} value={switchState} />
         <Text style={styles.header}>Color Customisable </Text>
         <View style={styles.switchContainer}>
-          <RNSwitch handleOnPress={() => {}} activeTrackColor="#FE5F8F" />
-          <RNSwitch handleOnPress={() => {}} activeTrackColor="#667eea" />
-          <RNSwitch handleOnPress={() => {}} activeTrackColor="#ed8936" />
-          <RNSwitch handleOnPress={() => {}} activeTrackColor="#feb2b2" />
+          <RNSwitch
+            handleOnPress={handleOnPressSwitch}
+            activeTrackColor="#FE5F8F"
+          />
+          <RNSwitch
+            handleOnPress={handleOnPressSwitch}
+            activeTrackColor="#667eea"
+          />
+          <RNSwitch
+            handleOnPress={handleOnPressSwitch}
+            activeTrackColor="#ed8936"
+          />
+          <RNSwitch
+            handleOnPress={handleOnPressSwitch}
+            activeTrackColor="#feb2b2"
+          />
         </View>
       </SafeAreaView>
     </>

diff --git a/example/RNSwitchExample/src/Switch.js b/example/RNSwitchExample/src/Switch.js
@@ -8,11 +8,11 @@ const RNSwitch = ({
   activeTrackColor,
   inActiveTrackColor,
   thumbColor,
+  value,
 }) => {
   const [switchTranslate] = useState(new Animated.Value(0));
-  const [on, setOn] = useState(false);
   useEffect(() => {
-    if (on) {
+    if (value) {
       spring(switchTranslate, {
         toValue: 21,
         mass: 1,
@@ -33,19 +33,19 @@ const RNSwitch = ({
         restDisplacementThreshold: 0.001,
       }).start();
     }
-  }, [on, switchTranslate]);
+  }, [value, switchTranslate]);
   const interpolateBackgroundColor = {
     backgroundColor: interpolateColors(switchTranslate, {
       inputRange: [0, 22],
       outputColorRange: [inActiveTrackColor, activeTrackColor],
     }),
   };
-  const handlePressAction = () => {
-    handleOnPress(!on);
-    setOn(!on);
-  };
+  const memoizedOnSwitchPressCallback = React.useCallback(() => {
+    handleOnPress(!value);
+  }, [handleOnPress, value]);
+
   return (
-    <Pressable onPress={handlePressAction}>
+    <Pressable onPress={memoizedOnSwitchPressCallback}>
       <Animated.View
         style={[styles.containerStyle, interpolateBackgroundColor]}>
         <Animated.View
@@ -97,12 +97,14 @@ RNSwitch.propTypes = {
   activeTrackColor: PropTypes.string,
   inActiveTrackColor: PropTypes.string,
   thumbColor: PropTypes.string,
+  value: PropTypes.bool,
 };
 
 RNSwitch.defaultProps = {
   activeTrackColor: '#007AFF',
   inActiveTrackColor: '#F2F5F7',
   thumbColor: '#FFF',
+  value: false,
 };
 
 export default RNSwitch;