improve route change animation

Author: ammarahm-ed

src/hooks/use-router.ts

@@ -1,4 +1,5 @@
 import {createContext, useCallback, useContext, useState} from 'react';
+import {Animated} from 'react-native';
 import {ActionSheetRef} from './../index';
 export type Route = {
   /**
@@ -56,23 +57,39 @@ export const useRouter = ({
   initialRoute,
   routes,
   getRef,
+  routeOpacity,
 }: {
   initialRoute?: string;
   routes?: Route[];
   getRef?: () => ActionSheetRef;
   onNavigate?: (route: string) => void;
   onNavigateBack?: (route: string) => void;
+  routeOpacity: Animated.Value;
 }): Router => {
   const [stack, setStack] = useState<Route[]>([]);
   const currentRoute: Route | undefined = stack?.[stack.length - 1];
 
+  const animate = useCallback(
+    (snap = 0, opacity = 0, delay = 0) => {
+      getRef?.().snapToRelativeOffset(snap);
+      Animated.timing(routeOpacity, {
+        toValue: opacity,
+        duration: 150,
+        useNativeDriver: true,
+        delay: delay,
+      }).start();
+    },
+    [getRef, routeOpacity],
+  );
+
   const navigate = useCallback(
     (name: string, params?: any, snap?: number) => {
-      getRef?.().snapToRelativeOffset(snap || 20);
+      animate(snap || 20, 0);
       setTimeout(() => {
         setStack(state => {
           const next = routes?.find(route => route.name === name);
           if (!next) {
+            animate(0, 1);
             return state;
           }
           const currentIndex = state.findIndex(
@@ -84,14 +101,12 @@ export const useRouter = ({
             return [...nextStack, {...next, params: params || next.params}];
           }
           onNavigate?.(next.name);
-          setTimeout(() => {
-            getRef?.().snapToRelativeOffset(0);
-          }, 1);
+          animate(0, 1, 150);
           return [...state, next];
         });
-      }, 300);
+      }, 100);
     },
-    [getRef, onNavigate, routes],
+    [animate, routes, onNavigate],
   );
 
   const initialNavigation = () => {
@@ -104,37 +119,47 @@ export const useRouter = ({
     } else {
       setStack([routes[0]]);
     }
+    Animated.timing(routeOpacity, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true,
+    }).start();
   };
 
   const goBack = (name?: string, snap?: number) => {
     getRef?.().snapToRelativeOffset(snap || -10);
+    animate(snap || -10, 0);
     setTimeout(() => {
       setStack(state => {
         const next = routes?.find(route => route.name === name);
         if (state.length === 1) {
           close();
+          animate(0, 1);
           return state;
         }
 
         if (!next) {
           const nextStack = [...state];
           nextStack.pop();
           if (currentRoute) {
-            getRef?.()?.snapToRelativeOffset(0);
             onNavigateBack?.(nextStack[nextStack.length - 1]?.name);
+            animate(0, 1, 150);
           }
           return nextStack;
         }
         const currentIndex = stack.findIndex(route => route.name === next.name);
         if (currentIndex > -1) {
           const nextStack = [...state];
           nextStack.splice(currentIndex);
+          onNavigateBack?.(nextStack[nextStack.length - 1]?.name);
+          animate(0, 1, 150);
           return [...nextStack, next];
         }
+        animate(0, 1, 150);
         onNavigateBack?.(next.name);
         return [...stack, next];
       });
-    }, 150);
+    }, 100);
   };
 
   const close = () => {

src/index.tsx

@@ -180,6 +180,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
       translateY: new Animated.Value(0),
       underlayTranslateY: new Animated.Value(100),
       keyboardTranslate: new Animated.Value(0),
+      routeOpacity: new Animated.Value(0),
     });
 
     const router = useRouter({
@@ -188,6 +189,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
       initialRoute: initialRoute,
       onNavigate: props.onNavigate,
       onNavigateBack: props.onNavigateBack,
+      routeOpacity: animations.routeOpacity,
     });
     const routerRef = useRef(router);
     useEffect(() => {
@@ -1121,13 +1123,14 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
                         {router?.stack.map(route => {
                           const RouteComponent = route.component as any;
                           return (
-                            <View
+                            <Animated.View
                               key={route.name}
                               style={{
                                 display:
                                   route.name !== router.currentRoute?.name
                                     ? 'none'
                                     : 'flex',
+                                opacity: animations.routeOpacity,
                               }}>
                               <RouterParamsContext.Provider
                                 value={route?.params}>
@@ -1137,7 +1140,7 @@ export default forwardRef<ActionSheetRef, ActionSheetProps>(
                                   payload={payloadRef.current}
                                 />
                               </RouterParamsContext.Provider>
-                            </View>
+                            </Animated.View>
                           );
                         })}
                       </RouterContext.Provider>