Add animation for switch children

src/components/Accordion/index.native.tsx

@@ -0,0 +1,81 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+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 */
+    isExpanded: SharedValue<boolean>;
+
+    /** Element that is inside Accordion */
+    children: ReactNode;
+
+    /** Duration of expansion animation  */
+    duration?: number;
+
+    /** Additional external style */
+    style?: StyleProp<ViewStyle>;
+
+    /** Was toggle triggered */
+    isToggleTriggered: SharedValue<boolean>;
+};
+
+function Accordion({isExpanded, children, duration = 300, isToggleTriggered, style}: AccordionProps) {
+    const height = useSharedValue(0);
+    const styles = useThemeStyles();
+
+    const derivedHeight = useDerivedValue(() => {
+        if (!isToggleTriggered.get()) {
+            return isExpanded.get() ? height.get() : 0;
+        }
+
+        return withTiming(height.get() * Number(isExpanded.get()), {
+            duration,
+            easing: Easing.inOut(Easing.quad),
+        });
+    });
+
+    const derivedOpacity = useDerivedValue(() => {
+        if (!isToggleTriggered.get()) {
+            return isExpanded.get() ? 1 : 0;
+        }
+
+        return withTiming(isExpanded.get() ? 1 : 0, {
+            duration,
+            easing: Easing.inOut(Easing.quad),
+        });
+    });
+
+    const animatedStyle = useAnimatedStyle(() => {
+        if (!isToggleTriggered.get() && !isExpanded.get()) {
+            return {
+                height: 0,
+                opacity: 0,
+            };
+        }
+        return {
+            height: !isToggleTriggered.get() ? height.get() : derivedHeight.get(),
+            opacity: derivedOpacity.get(),
+        };
+    });
+
+    return (
+        <Animated.View style={[animatedStyle, style]}>
+            <View
+                onLayout={(e) => {
+                    height.set(e.nativeEvent.layout.height);
+                }}
+                style={[styles.pAbsolute, styles.l0, styles.r0, styles.t0]}
+            >
+                {children}
+            </View>
+        </Animated.View>
+    );
+}
+
+Accordion.displayName = 'Accordion';
+
+export default Accordion;

src/components/Accordion/index.tsx

@@ -0,0 +1,78 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+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';
+
+type AccordionProps = {
+    /** Giving information whether the component is open */
+    isExpanded: SharedValue<boolean>;
+
+    /** Element that is inside Accordion */
+    children: ReactNode;
+
+    /** Duration of expansion animation  */
+    duration?: number;
+
+    /** Additional external style */
+    style?: StyleProp<ViewStyle>;
+
+    /** Was toggle triggered */
+    isToggleTriggered: SharedValue<boolean>;
+};
+
+function Accordion({isExpanded, children, duration = 300, isToggleTriggered, style}: AccordionProps) {
+    const height = useSharedValue(0);
+
+    const derivedHeight = useDerivedValue(() => {
+        if (!isToggleTriggered.get()) {
+            return isExpanded.get() ? height.get() : 0;
+        }
+
+        return withTiming(height.get() * Number(isExpanded.get()), {
+            duration,
+            easing: Easing.inOut(Easing.quad),
+        });
+    });
+
+    const derivedOpacity = useDerivedValue(() => {
+        if (!isToggleTriggered.get()) {
+            return isExpanded.get() ? 1 : 0;
+        }
+
+        return withTiming(isExpanded.get() ? 1 : 0, {
+            duration,
+            easing: Easing.inOut(Easing.quad),
+        });
+    });
+
+    const animatedStyle = useAnimatedStyle(() => {
+        if (!isToggleTriggered.get() && !isExpanded.get()) {
+            return {
+                height: 0,
+                opacity: 0,
+            };
+        }
+
+        return {
+            height: !isToggleTriggered.get() ? undefined : derivedHeight.get(),
+            opacity: derivedOpacity.get(),
+        };
+    });
+
+    return (
+        <Animated.View style={[animatedStyle, style]}>
+            <View
+                onLayout={(e) => {
+                    height.set(e.nativeEvent.layout.height);
+                }}
+            >
+                {children}
+            </View>
+        </Animated.View>
+    );
+}
+Accordion.displayName = 'Accordion';
+
+export default Accordion;

src/libs/Navigation/linkTo/index.ts

@@ -183,7 +183,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);
@@ -201,7 +207,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);