Adding animation for children of switch components

src/CONST.ts

@@ -6437,6 +6437,8 @@ const CONST = {
     },
 
     MIGRATED_USER_WELCOME_MODAL: 'migratedUserWelcomeModal',
+
+    DEFAULT_POLICY_ID: '-1',
 } as const;
 
 type Country = keyof typeof CONST.ALL_COUNTRIES;

src/components/Accordion/index.tsx

@@ -0,0 +1,45 @@
+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';
+
+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;
+};
+
+function Accordion({isExpanded, children, duration = 300}: AccordionProps) {
+    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={[styles.pAbsolute, styles.l0, styles.r0, styles.t0]}
+            >
+                {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,7 @@
 import {Str} from 'expensify-common';
-import React from 'react';
+import React, {useEffect, useState} from 'react';
+import {useSharedValue} from 'react-native-reanimated';
+import Accordion from '@components/Accordion';
 import ConnectionLayout from '@components/ConnectionLayout';
 import MenuItemWithTopDescription from '@components/MenuItemWithTopDescription';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -50,11 +52,23 @@ function SageIntacctToggleMappingsPage({route}: SageIntacctToggleMappingsPagePro
 
     const policy = usePolicy(route.params.policyID);
     const mappingName: SageIntacctMappingName = route.params.mapping;
-    const policyID: string = policy?.id ?? '-1';
-
+    const policyID: string = policy?.id ?? CONST.DEFAULT_POLICY_ID;
     const config = policy?.connections?.intacct?.config;
-    const translationKeys = getDisplayTypeTranslationKeys(config?.mappings?.[mappingName]);
     const isImportMappingEnable = config?.mappings?.[mappingName] !== CONST.SAGE_INTACCT_MAPPING_VALUE.NONE;
+    const isAccordionExpanded = useSharedValue(isImportMappingEnable);
+
+    // 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}
@@ -81,12 +95,13 @@ function SageIntacctToggleMappingsPage({route}: SageIntacctToggleMappingsPagePro
                 onToggle={(enabled) => {
                     const mappingValue = enabled ? CONST.SAGE_INTACCT_MAPPING_VALUE.TAG : CONST.SAGE_INTACCT_MAPPING_VALUE.NONE;
                     updateSageIntacctMappingValue(policyID, mappingName, mappingValue, config?.mappings?.[mappingName]);
+                    isAccordionExpanded.set(enabled);
                 }}
                 pendingAction={settingsPendingAction([mappingName], config?.pendingFields)}
                 errors={ErrorUtils.getLatestErrorField(config ?? {}, mappingName)}
                 onCloseError={() => clearSageIntacctErrorField(policyID, mappingName)}
             />
-            {isImportMappingEnable && (
+            <Accordion isExpanded={isAccordionExpanded}>
                 <OfflineWithFeedback pendingAction={settingsPendingAction([mappingName], config?.pendingFields)}>
                     <MenuItemWithTopDescription
                         title={translationKeys?.titleKey ? translate(translationKeys?.titleKey) : undefined}
@@ -102,7 +117,7 @@ function SageIntacctToggleMappingsPage({route}: SageIntacctToggleMappingsPagePro
                         {translationKeys?.descriptionKey ? translate(translationKeys?.descriptionKey) : undefined}
                     </Text>
                 </OfflineWithFeedback>
-            )}
+            </Accordion>
         </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>
     );