add onAnimationEnd function

Author: meksiabdou

README.md

@@ -68,6 +68,7 @@ const styles = StyleSheet.create({
 | width               | number    | 100       |
 | value               | boolean   | false     |
 | onValueChange       | function  | undefined |
+| onAnimationEnd      | function  | undefined |
 | disabled            | boolean   | false     |
 | activeText          | string    | ON        |
 | inActiveText        | string    | OFF       |

example/ios/SwitchExample.xcodeproj/xcshareddata/xcschemes/SwitchExample.xcscheme

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
    LastUpgradeVersion = "1210"
-   version = "1.3">
+   version = "1.7">
    <BuildAction
       parallelizeBuildables = "YES"
       buildImplicitDependencies = "YES">
@@ -22,6 +22,13 @@
          </BuildActionEntry>
       </BuildActionEntries>
    </BuildAction>
+   <TestAction
+      buildConfiguration = "Debug"
+      selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"
+      selectedLauncherIdentifier = "Xcode.DebuggerFoundation.Launcher.LLDB"
+      shouldUseLaunchSchemeArgsEnv = "YES"
+      shouldAutocreateTestPlan = "YES">
+   </TestAction>
    <LaunchAction
       buildConfiguration = "Debug"
       selectedDebuggerIdentifier = "Xcode.DebuggerFoundation.Debugger.LLDB"

example/src/App.tsx

@@ -10,8 +10,15 @@ export default function App() {
     3: true,
   });
 
+  const [theme, setTheme] = React.useState('light');
+
   return (
-    <View style={styles.container}>
+    <View
+      style={[
+        styles.container,
+        { backgroundColor: theme === 'dark' ? '#666' : '#ccc' },
+      ]}
+    >
       <View>
         <Switch
           value={value['0']}
@@ -21,6 +28,7 @@ export default function App() {
           inActiveText="حرام"
           backgroundInActive={'#ff0000'}
           circleInActiveColor={'#fff'}
+          disabled={false}
           circleSize={25}
         />
       </View>
@@ -34,7 +42,7 @@ export default function App() {
           switchBorderRadius={30}
           switchPaddingLeft={2}
           switchPaddingRight={2}
-          circleInActiveColor='#ff5454'
+          circleInActiveColor="#ff5454"
           switchStyle={{ paddingVertical: 4 }}
         />
       </View>
@@ -76,6 +84,10 @@ export default function App() {
               />
             </View>
           }
+          onAnimationEnd={(_value) => {
+            setTheme(!_value ? 'dark' : 'light');
+            console.log('theme is ', !_value ? 'dark' : 'light');
+          }}
         />
       </View>
     </View>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meksiabdou/react-native-switch",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Customisable switch component for React Native",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

src/components/switch.tsx

@@ -3,17 +3,22 @@ import {
   StyleSheet,
   TouchableWithoutFeedback,
   I18nManager,
-  View,
 } from 'react-native';
 import Reanimated, {
+  AnimationCallback,
   useAnimatedStyle,
   useSharedValue,
   withSpring,
+  runOnJS,
 } from 'react-native-reanimated';
 import type { SwitchProps } from '../types';
 
-const spring = (_value: any, config: any = { damping: 20, stiffness: 120 }) =>
-  withSpring(_value, config);
+const spring = (
+  _value: any,
+  config: any = { damping: 20, stiffness: 120 },
+  callback?: AnimationCallback
+) =>
+  withSpring(_value, config, callback);
 
 const PADDINGHORIZONTAL = 2;
 
@@ -45,6 +50,7 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
     switchStyle,
     circleChildrenActive,
     circleChildrenInActive,
+    onAnimationEnd,
   } = IProps;
 
   const { isRTL } = I18nManager;
@@ -142,7 +148,6 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
         (defaultCircleSize +
           (defaultPadding.paddingLeft + defaultPadding.paddingRight)));
     if (value) {
-      circleTranslateX.value = spring(size, { damping: 15, stiffness: 120 });
       textTranslateXActive.value = spring(0);
       textTranslateXInActive.value = spring(factory * defaultWidth);
       if (circleActiveColor) {
@@ -153,8 +158,17 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
       }
       circleChildrenActiveOpacity.value = spring(1);
       circleChildrenInActiveOpacity.value = spring(0);
+      circleTranslateX.value = spring(
+        size,
+        { damping: 15, stiffness: 120 },
+        (finished?: boolean) => {
+          'worklet';
+          if (finished && onAnimationEnd) {
+            runOnJS(onAnimationEnd)(true);
+          }
+        }
+      );
     } else {
-      circleTranslateX.value = spring(0, { damping: 15, stiffness: 120 });
       textTranslateXActive.value = spring(-(defaultWidth * factory));
       textTranslateXInActive.value = spring(0);
       if (circleInActiveColor) {
@@ -165,6 +179,16 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
       }
       circleChildrenActiveOpacity.value = spring(0);
       circleChildrenInActiveOpacity.value = spring(1);
+      circleTranslateX.value = spring(
+        0,
+        { damping: 15, stiffness: 120 },
+        (finished?: boolean) => {
+          'worklet';
+          if (finished && onAnimationEnd) {
+            runOnJS(onAnimationEnd)(false);
+          }
+        }
+      );
     }
   }, [value, defaultWidth, defaultCircleSize, defaultPadding, isRTL]);
 
@@ -176,20 +200,14 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
     }
   }, [disabled]);
 
-  const Button = (props: any) => {
-    if (typeof onValueChange === 'function' && !disabled) {
-      return (
-        <TouchableWithoutFeedback
-          {...props}
-          onPress={() => onValueChange(!value)}
-        />
-      );
-    }
-    return <View {...props} />;
-  };
-
   return (
-    <Button>
+    <TouchableWithoutFeedback
+      onPress={() => {
+        if (!disabled) {
+          onValueChange?.(!value);
+        }
+      }}
+    >
       <Reanimated.View
         style={[
           styles.switch,
@@ -277,14 +295,15 @@ const Switch = (IProps: SwitchProps): JSX.Element => {
           </Reanimated.View>
         </Reanimated.View>
       </Reanimated.View>
-    </Button>
+    </TouchableWithoutFeedback>
   );
 };
 
 Switch.defaultProps = {
   disabled: false,
   value: false,
   onValueChange: undefined,
+  onAnimationEnd: undefined,
   activeText: 'ON',
   inActiveText: 'OFF',
   backgroundActive: '#249c00',

src/types/index.d.ts

@@ -5,6 +5,7 @@ export interface SwitchProps {
   disabled?: boolean;
   value: boolean;
   onValueChange?: (value: boolean) => void;
+  onAnimationEnd?: (value?: boolean) => void;
   width?: number;
   activeText?: string;
   inActiveText?: string;