Adding animation for children of switch components

src/components/Accordion/index.tsx

@@ -0,0 +1,34 @@
+import type {ReactNode} from 'react';
+import React from 'react';
+import {View} from 'react-native';
+import type {SharedValue} from 'react-native-reanimated';
+import Animated, {useAnimatedStyle, useDerivedValue, useSharedValue, withTiming} from 'react-native-reanimated';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function Accordion({isExpanded, children, duration = 300}: {isExpanded: SharedValue<boolean>; children: ReactNode; duration?: number}) {
+    const height = useSharedValue(0);
+    const styles = useThemeStyles();
+    const derivedHeight = useDerivedValue(() =>
+        withTiming(height.get() * Number(isExpanded.get()), {
+            duration,
+        }),
+    );
+    const bodyStyle = useAnimatedStyle(() => ({
+        height: derivedHeight.get(),
+    }));
+
+    return (
+        <Animated.View style={[bodyStyle, styles.overflowHidden]}>
+            <View
+                onLayout={(e) => {
+                    height.set(e.nativeEvent.layout.height);
+                }}
+                style={{position: 'absolute', left: 0, right: 0, top: 0}}
+            >
+                {children}
+            </View>
+        </Animated.View>
+    );
+}
+
+export default Accordion;

src/components/Switch.tsx

@@ -26,21 +26,30 @@ type SwitchProps = {
 
     /** Callback to fire when the switch is toggled in disabled state */
     disabledAction?: () => void;
+
+    /**
+     * Callback function triggered only after a successful change
+     * in the external state of the switch, after the switch state change animation is triggered
+     */
+    onStateChange?: (isOn: boolean) => void;
 };
 
 const OFFSET_X = {
     OFF: 0,
     ON: 20,
 };
 
-function Switch({isOn, onToggle, accessibilityLabel, disabled, showLockIcon, disabledAction}: SwitchProps) {
+function Switch({isOn, onToggle, accessibilityLabel, disabled, showLockIcon, disabledAction, onStateChange}: SwitchProps) {
     const styles = useThemeStyles();
     const offsetX = useSharedValue(isOn ? OFFSET_X.ON : OFFSET_X.OFF);
     const theme = useTheme();
 
     useEffect(() => {
         offsetX.set(withTiming(isOn ? OFFSET_X.ON : OFFSET_X.OFF, {duration: 300}));
-    }, [isOn, offsetX]);
+        if (onStateChange) {
+            onStateChange(isOn);
+        }
+    }, [onStateChange, isOn, offsetX]);
 
     const handleSwitchPress = () => {
         InteractionManager.runAfterInteractions(() => {

src/pages/workspace/accounting/intacct/import/SageIntacctToggleMappingsPage.tsx

@@ -1,5 +1,5 @@
 import {Str} from 'expensify-common';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import ConnectionLayout from '@components/ConnectionLayout';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -51,10 +51,22 @@ function SageIntacctToggleMappingsPage({route}: SageIntacctToggleMappingsPagePro
     const policy = usePolicy(route.params.policyID);
     const mappingName: SageIntacctMappingName = route.params.mapping;
     const policyID: string = policy?.id ?? '-1';
-
     const config = policy?.connections?.intacct?.config;
-    const translationKeys = getDisplayTypeTranslationKeys(config?.mappings?.[mappingName]);
     const isImportMappingEnable = config?.mappings?.[mappingName] !== CONST.SAGE_INTACCT_MAPPING_VALUE.NONE;
+
+    // We are storing translation keys in the local state for animation purposes.
+    // Otherwise, the values change to undefined immediately after clicking, before the closing animation finishes,
+    // resulting in a janky animation effect.
+
+    const [translationKeys, setTranslationKey] = useState<DisplayTypeTranslationKeys | undefined>(undefined);
+
+    useEffect(() => {
+        if (!isImportMappingEnable) {
+            return;
+        }
+        setTranslationKey(getDisplayTypeTranslationKeys(config?.mappings?.[mappingName]));
+    }, [isImportMappingEnable, config?.mappings, mappingName]);
+
     return (
         <ConnectionLayout
             displayName={SageIntacctToggleMappingsPage.displayName}
@@ -85,24 +97,24 @@ function SageIntacctToggleMappingsPage({route}: SageIntacctToggleMappingsPagePro
                 pendingAction={settingsPendingAction([mappingName], config?.pendingFields)}
                 errors={ErrorUtils.getLatestErrorField(config ?? {}, mappingName)}
                 onCloseError={() => clearSageIntacctErrorField(policyID, mappingName)}
+                subMenuItems={
+                    <OfflineWithFeedback pendingAction={settingsPendingAction([mappingName], config?.pendingFields)}>
+                        <MenuItemWithTopDescription
+                            title={translationKeys?.titleKey ? translate(translationKeys?.titleKey) : undefined}
+                            description={translate('workspace.common.displayedAs')}
+                            shouldShowRightIcon
+                            onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_MAPPINGS_TYPE.getRoute(policyID, mappingName))}
+                            brickRoadIndicator={areSettingsInErrorFields([mappingName], config?.errorFields) ? 'error' : undefined}
+                        />
+                        <Text
+                            style={[styles.textLabelSupporting, styles.ph5]}
+                            numberOfLines={2}
+                        >
+                            {translationKeys?.descriptionKey ? translate(translationKeys?.descriptionKey) : undefined}
+                        </Text>
+                    </OfflineWithFeedback>
+                }
             />
-            {isImportMappingEnable && (
-                <OfflineWithFeedback pendingAction={settingsPendingAction([mappingName], config?.pendingFields)}>
-                    <MenuItemWithTopDescription
-                        title={translationKeys?.titleKey ? translate(translationKeys?.titleKey) : undefined}
-                        description={translate('workspace.common.displayedAs')}
-                        shouldShowRightIcon
-                        onPress={() => Navigation.navigate(ROUTES.POLICY_ACCOUNTING_SAGE_INTACCT_MAPPINGS_TYPE.getRoute(policyID, mappingName))}
-                        brickRoadIndicator={areSettingsInErrorFields([mappingName], config?.errorFields) ? 'error' : undefined}
-                    />
-                    <Text
-                        style={[styles.textLabelSupporting, styles.ph5]}
-                        numberOfLines={2}
-                    >
-                        {translationKeys?.descriptionKey ? translate(translationKeys?.descriptionKey) : undefined}
-                    </Text>
-                </OfflineWithFeedback>
-            )}
         </ConnectionLayout>
     );
 }

src/pages/workspace/workflows/ToggleSettingsOptionRow.tsx

@@ -2,6 +2,8 @@ import type {ReactNode} from 'react';
 import React, {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';
@@ -98,6 +100,10 @@ function ToggleSettingOptionRow({
     showLockIcon = false,
 }: ToggleSettingOptionRowProps) {
     const styles = useThemeStyles();
+    const isExpanded = useSharedValue(isActive);
+    const setIsExpanded = (value: boolean) => {
+        isExpanded.set(value);
+    };
 
     const subtitleHtml = useMemo(() => {
         if (!subtitle || !shouldParseSubtitle || typeof subtitle !== 'string') {
@@ -175,10 +181,11 @@ function ToggleSettingOptionRow({
                         isOn={isActive}
                         disabled={disabled}
                         showLockIcon={showLockIcon}
+                        onStateChange={setIsExpanded}
                     />
                 </View>
                 {shouldPlaceSubtitleBelowSwitch && subtitle && subTitleView}
-                {isActive && subMenuItems}
+                <Accordion isExpanded={isExpanded}>{subMenuItems}</Accordion>
             </View>
         </OfflineWithFeedback>
     );