fix animation using navigation

Author: sumo-slonik

src/components/Accordion/index.tsx

@@ -4,7 +4,6 @@ import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
 import type {SharedValue} from 'react-native-reanimated';
 import Animated, {Easing, useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
-import useThemeStyles from '@hooks/useThemeStyles';
 
 type AccordionProps = {
     /** Giving information whether the component is open */
@@ -19,48 +18,52 @@ type AccordionProps = {
     /** Additional external style */
     style?: StyleProp<ViewStyle>;
 
-    /** Should active animation */
-    shouldActiveAnimation?: React.RefObject<boolean>;
+    /** Was toggle triggered */
+    isToggleTriggered: React.MutableRefObject<boolean>;
 };
 
-function Accordion({isExpanded, children, duration = 300, style, shouldActiveAnimation = React.useRef(true)}: AccordionProps) {
+function Accordion({isExpanded, children, duration = 300, style, isToggleTriggered}: AccordionProps) {
     const height = useSharedValue(0);
-    const styles = useThemeStyles();
 
-    const derivedHeight = useDerivedValue(() =>
-        shouldActiveAnimation.current
-            ? withTiming(height.get() * Number(isExpanded.get()), {
-                  duration,
-                  easing: Easing.inOut(Easing.quad),
-              })
-            : height.get() * Number(isExpanded.get()),
-    );
+    const derivedHeight = useDerivedValue(() => {
+        if (!isToggleTriggered.current) {
+            return isExpanded.get() ? height.get() : 0;
+        }
+
+        return withTiming(height.get() * Number(isExpanded.get()), {
+            duration,
+            easing: Easing.inOut(Easing.quad),
+        });
+    });
 
     const derivedOpacity = useDerivedValue(() => {
-        if (shouldActiveAnimation.current) {
-            return withTiming(isExpanded.get() ? 1 : 0, {
-                duration,
-                easing: Easing.inOut(Easing.quad),
-            });
+        if (!isToggleTriggered.current) {
+            return isExpanded.get() ? 1 : 0;
         }
-        return isExpanded.get() ? 1 : 0;
+
+        return withTiming(isExpanded.get() ? 1 : 0, {
+            duration,
+            easing: Easing.inOut(Easing.quad),
+        });
     });
 
-    const bodyStyle = useAnimatedStyle(() => ({
-        height: derivedHeight.get(),
-        opacity: derivedOpacity.get(),
-    }));
+    const animatedStyle = useAnimatedStyle(() => {
+        if (!isToggleTriggered.current && !isExpanded.get()) {
+            return {
+                height: 0,
+                opacity: 0,
+            };
+        }
+
+        return {
+            height: !isToggleTriggered.current ? undefined : derivedHeight.get(),
+            opacity: derivedOpacity.get(),
+        };
+    });
 
     return (
-        <Animated.View style={[bodyStyle, style]}>
-            <View
-                onLayout={(e) => {
-                    height.set(e.nativeEvent.layout.height);
-                }}
-                style={[styles.pAbsolute, styles.l0, styles.r0, styles.t0]}
-            >
-                {children}
-            </View>
+        <Animated.View style={[style, animatedStyle]}>
+            <View onLayout={(e) => height.set(e.nativeEvent.layout.height)}>{children}</View>
         </Animated.View>
     );
 }

src/libs/Navigation/linkTo/index.ts

@@ -184,7 +184,13 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
         }
     }
 
-    if (action && 'payload' in action && action.payload && 'name' in action.payload && isSideModalNavigator(action.payload.name)) {
+    if (
+        action &&
+        'payload' in action &&
+        action.payload &&
+        'name' in action.payload &&
+        (isSideModalNavigator(action.payload.name) || action.payload.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR)
+    ) {
         // Information about the state may be in the params.
         const currentFocusedRoute = findFocusedRoute(extrapolateStateFromParams(rootState));
         const targetFocusedRoute = findFocusedRoute(stateFromPath);
@@ -202,7 +208,7 @@ export default function linkTo(navigation: NavigationContainerRef<RootStackParam
             // There are situations where a route already exists on the current navigation stack
             // But we want to push the same route instead of going back in the stack
             // Which would break the user navigation history
-            if (!isActiveRoute && type === CONST.NAVIGATION.ACTION_TYPE.PUSH) {
+            if ((!isActiveRoute && type === CONST.NAVIGATION.ACTION_TYPE.PUSH) || action.payload.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR) {
                 minimalAction.type = CONST.NAVIGATION.ACTION_TYPE.PUSH;
             }
             root.dispatch(minimalAction);

src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

@@ -1,7 +1,7 @@
 import type {ReactNode} from 'react';
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} from 'react-native';
-import type {LayoutChangeEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {useSharedValue} from 'react-native-reanimated';
 import Accordion from '@components/Accordion';
 import Icon from '@components/Icon';
@@ -105,25 +105,12 @@ function ToggleSettingOptionRow({
 }: ToggleSettingOptionRowProps) {
     const styles = useThemeStyles();
     const isExpanded = useSharedValue(isActive);
-    const shouldActiveAnimation = React.useRef(false);
-    const [isVisible, setIsVisible] = useState(false); // State to track visibility
+    const isToggleTriggered = React.useRef(false);
 
     useEffect(() => {
         isExpanded.set(isActive);
     }, [isExpanded, isActive]);
 
-    const handleVisibilityChange = (e: LayoutChangeEvent) => {
-        const {height, y} = e.nativeEvent.layout;
-        const isInViewport = y + height > 0 && y < height; // Check if the element is in the viewport
-
-        if (isInViewport && !isVisible) {
-            setIsVisible(true);
-        } else if (!isInViewport && isVisible) {
-            setIsVisible(false);
-            shouldActiveAnimation.current = false; // Set to false when it's not visible
-        }
-    };
-
     const subtitleHtml = useMemo(() => {
         if (!subtitle || !shouldParseSubtitle || typeof subtitle !== 'string') {
             return '';
@@ -175,10 +162,7 @@ function ToggleSettingOptionRow({
             style={[wrapperStyle]}
             onClose={onCloseError}
         >
-            <View
-                style={styles.pRelative}
-                onLayout={handleVisibilityChange}
-            >
+            <View style={styles.pRelative}>
                 <View style={[styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
                     <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
                         {!!icon && (
@@ -199,9 +183,9 @@ function ToggleSettingOptionRow({
                     <Switch
                         disabledAction={disabledAction}
                         accessibilityLabel={switchAccessibilityLabel}
-                        onToggle={(isEnabled) => {
-                            onToggle(isEnabled);
-                            shouldActiveAnimation.current = true;
+                        onToggle={(isOn) => {
+                            isToggleTriggered.current = true;
+                            onToggle(isOn);
                         }}
                         isOn={isActive}
                         disabled={disabled}
@@ -212,7 +196,7 @@ function ToggleSettingOptionRow({
                 <Accordion
                     isExpanded={isExpanded}
                     style={accordionStyle}
-                    shouldActiveAnimation={shouldActiveAnimation}
+                    isToggleTriggered={isToggleTriggered}
                 >
                     {subMenuItems}
                 </Accordion>