Adding animation for children of switch components

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);

src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

@@ -1,7 +1,9 @@
 import type {ReactNode} from 'react';
-import React, {useMemo} from 'react';
+import React, {useEffect, useMemo} from 'react';
 import {View} 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';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import RenderHTML from '@components/RenderHTML';
@@ -46,6 +48,9 @@ type ToggleSettingOptionRowProps = {
     /** Used to apply styles to the Subtitle */
     subtitleStyle?: StyleProp<TextStyle>;
 
+    /** Used to apply styles to the Accordion */
+    accordionStyle?: StyleProp<ViewStyle>;
+
     /** Whether the option is enabled or not */
     isActive: boolean;
 
@@ -81,6 +86,7 @@ function ToggleSettingOptionRow({
     customTitle,
     subtitle,
     subtitleStyle,
+    accordionStyle,
     switchAccessibilityLabel,
     shouldPlaceSubtitleBelowSwitch,
     shouldEscapeText = undefined,
@@ -98,6 +104,12 @@ function ToggleSettingOptionRow({
     showLockIcon = false,
 }: ToggleSettingOptionRowProps) {
     const styles = useThemeStyles();
+    const isExpanded = useSharedValue(isActive);
+    const isToggleTriggered = useSharedValue(false);
+
+    useEffect(() => {
+        isExpanded.set(isActive);
+    }, [isExpanded, isActive]);
 
     const subtitleHtml = useMemo(() => {
         if (!subtitle || !shouldParseSubtitle || typeof subtitle !== 'string') {
@@ -171,14 +183,23 @@ function ToggleSettingOptionRow({
                     <Switch
                         disabledAction={disabledAction}
                         accessibilityLabel={switchAccessibilityLabel}
-                        onToggle={onToggle}
+                        onToggle={(isOn) => {
+                            isToggleTriggered.set(true);
+                            onToggle(isOn);
+                        }}
                         isOn={isActive}
                         disabled={disabled}
                         showLockIcon={showLockIcon}
                     />
                 </View>
                 {shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
-                {isActive && subMenuItems}
+                <Accordion
+                    isExpanded={isExpanded}
+                    style={accordionStyle}
+                    isToggleTriggered={isToggleTriggered}
+                >
+                    {subMenuItems}
+                </Accordion>
             </View>
         </OfflineWithFeedback>
     );