Migrate Two Factor Authentication to use separate screens (remove react-native-animatable)

.eslintrc.js

@@ -75,6 +75,10 @@ const restrictedImportPaths = [
         importNames: ['memoize'],
         message: "Please use '@src/libs/memoize' instead.",
     },
+    {
+        name: 'react-native-animatable',
+        message: "Please use 'react-native-reanimated' instead.",
+    },
 ];
 
 const restrictedImportPatterns = [

src/CONST.ts

@@ -303,6 +303,7 @@ const CONST = {
     ANIMATED_HIGHLIGHT_END_DELAY: 800,
     ANIMATED_HIGHLIGHT_END_DURATION: 2000,
     ANIMATED_TRANSITION: 300,
+    ANIMATED_SCREEN_TRANSITION: 400,
     ANIMATED_TRANSITION_FROM_VALUE: 100,
     ANIMATION_IN_TIMING: 100,
     ANIMATION_DIRECTION: {

src/components/AnimatedStep/AnimatedStepContext.ts

@@ -1,13 +1,17 @@
-import type React from 'react';
 import {createContext} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import type {ValueOf} from 'type-fest';
 import type CONST from '@src/CONST';
 
 type AnimationDirection = ValueOf<typeof CONST.ANIMATION_DIRECTION>;
 
 type StepContext = {
-    animationDirection: AnimationDirection;
-    setAnimationDirection: React.Dispatch<React.SetStateAction<AnimationDirection>>;
+    currentStep: string;
+    previousStep: string | null;
+    setStep: (newStep: string, direction: AnimationDirection) => void;
+    renderStep: () => React.ReactNode;
+    currentScreenAnimatedStyle: StyleProp<ViewStyle>;
+    previousScreenAnimatedStyle: StyleProp<ViewStyle>;
 };
 
 const AnimatedStepContext = createContext<StepContext | null>(null);

src/components/AnimatedStep/AnimatedStepProvider.tsx

@@ -1,12 +1,82 @@
-import React, {useMemo, useState} from 'react';
+import type {ReactNode} from 'react';
+import React, {useCallback, useMemo, useState} from 'react';
+import {Easing, runOnJS, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import useResponsiveLayout from '@hooks/useResponsiveLayout';
+import useWindowDimensions from '@hooks/useWindowDimensions';
+import variables from '@styles/variables';
 import CONST from '@src/CONST';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
 import type {AnimationDirection} from './AnimatedStepContext';
 import AnimatedStepContext from './AnimatedStepContext';
 
-function AnimatedStepProvider({children}: ChildrenProps): React.ReactNode {
+type AnimatedStepProviderProps = ChildrenProps & {
+    initialStep: string;
+    steps: Record<string, ReactNode>;
+};
+
+function AnimatedStepProvider({children, steps, initialStep}: AnimatedStepProviderProps): React.ReactNode {
     const [animationDirection, setAnimationDirection] = useState<AnimationDirection>(CONST.ANIMATION_DIRECTION.IN);
-    const contextValue = useMemo(() => ({animationDirection, setAnimationDirection}), [animationDirection, setAnimationDirection]);
+    const [currentStep, setCurrentStep] = useState<string>(initialStep);
+    const [previousStep, setPreviousStep] = useState<string | null>(null);
+
+    const currentTranslateX = useSharedValue(0);
+    const prevTranslateX = useSharedValue(0);
+
+    const {windowWidth} = useWindowDimensions();
+    // We need to use isSmallScreenWidth, to apply the correct width for the sidebar
+    // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
+    const {isSmallScreenWidth} = useResponsiveLayout();
+
+    const setStep = useCallback(
+        (newStep: string, direction: AnimationDirection) => {
+            if (currentStep === newStep || !!previousStep) {
+                return;
+            }
+
+            setAnimationDirection(direction);
+            setPreviousStep(currentStep);
+            setCurrentStep(newStep);
+
+            const sideBarWidth = isSmallScreenWidth ? windowWidth : variables.sideBarWidth;
+            const currentStepPosition = direction === CONST.ANIMATION_DIRECTION.IN ? sideBarWidth : -CONST.ANIMATED_TRANSITION_FROM_VALUE;
+            const previousStepPosition = direction === CONST.ANIMATION_DIRECTION.IN ? -CONST.ANIMATED_TRANSITION_FROM_VALUE : sideBarWidth;
+
+            currentTranslateX.set(currentStepPosition);
+            currentTranslateX.set(withTiming(0, {duration: CONST.ANIMATED_SCREEN_TRANSITION, easing: Easing.inOut(Easing.cubic)}, () => runOnJS(setPreviousStep)(null)));
+
+            prevTranslateX.set(0);
+            prevTranslateX.set(withTiming(previousStepPosition, {duration: CONST.ANIMATED_SCREEN_TRANSITION, easing: Easing.inOut(Easing.cubic)}));
+        },
+        [currentStep, previousStep, isSmallScreenWidth, windowWidth, currentTranslateX, prevTranslateX],
+    );
+
+    const currentScreenAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{translateX: currentTranslateX.get()}],
+    }));
+
+    const previousScreenAnimatedStyle = useAnimatedStyle(() => ({
+        transform: [{translateX: prevTranslateX.get()}],
+        zIndex: animationDirection === CONST.ANIMATION_DIRECTION.IN ? -1 : 1,
+    }));
+
+    const contextValue = useMemo(
+        () => ({
+            currentStep,
+            previousStep,
+            setStep,
+            currentScreenAnimatedStyle,
+            previousScreenAnimatedStyle,
+            renderStep: () => {
+                return (
+                    <>
+                        {steps[currentStep]}
+                        {previousStep && steps[previousStep]}
+                    </>
+                );
+            },
+        }),
+        [currentStep, previousStep, setStep, currentScreenAnimatedStyle, previousScreenAnimatedStyle, steps],
+    );
 
     return <AnimatedStepContext.Provider value={contextValue}>{children}</AnimatedStepContext.Provider>;
 }

src/components/AnimatedStep/index.tsx

@@ -1,50 +1,64 @@
-import React, {useMemo} from 'react';
-import type {StyleProp, ViewStyle} from 'react-native';
-import * as Animatable from 'react-native-animatable';
+import React, {useEffect} from 'react';
+import Animated from 'react-native-reanimated';
+import FullPageOfflineBlockingView from '@components/BlockingViews/FullPageOfflineBlockingView';
+import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import ScreenWrapper from '@components/ScreenWrapper';
 import useThemeStyles from '@hooks/useThemeStyles';
-import useNativeDriver from '@libs/useNativeDriver';
-import CONST from '@src/CONST';
+import type {StepCounterParams} from '@src/languages/params';
 import type ChildrenProps from '@src/types/utils/ChildrenProps';
-import type {AnimationDirection} from './AnimatedStepContext';
+import useAnimatedStepContext from './useAnimatedStepContext';
 
 type AnimatedStepProps = ChildrenProps & {
-    /** Styles to be assigned to Container */
-    style: StyleProp<ViewStyle>;
+    /** Name of the step */
+    stepName: string;
 
-    /** Whether we're animating the step in or out */
-    direction: AnimationDirection;
+    /** Title of the Header */
+    title?: string;
 
-    /** Callback to fire when the animation ends */
-    onAnimationEnd?: () => void;
+    /** Data to display a step counter in the header */
+    stepCounter?: StepCounterParams;
+
+    /** Method to trigger when pressing back button of the header */
+    onBackButtonPress?: () => void;
+
+    /** Called when navigated Screen's transition is finished. It does not fire when user exits the page. */
+    onEntryTransitionEnd?: () => void;
+
+    /** Flag to indicate if the keyboard avoiding view should be enabled */
+    shouldEnableKeyboardAvoidingView?: boolean;
 };
 
-function AnimatedStep({onAnimationEnd, direction = CONST.ANIMATION_DIRECTION.IN, style, children}: AnimatedStepProps) {
+function AnimatedStep({stepName, title = '', stepCounter, onBackButtonPress, children = null, shouldEnableKeyboardAvoidingView = true, onEntryTransitionEnd}: AnimatedStepProps) {
     const styles = useThemeStyles();
+    const {previousStep, currentScreenAnimatedStyle, previousScreenAnimatedStyle} = useAnimatedStepContext();
 
-    const animationStyle = useMemo(() => {
-        const transitionValue = direction === 'in' ? CONST.ANIMATED_TRANSITION_FROM_VALUE : -CONST.ANIMATED_TRANSITION_FROM_VALUE;
+    useEffect(() => {
+        if (previousStep) {
+            return;
+        }
 
-        return styles.makeSlideInTranslation('translateX', transitionValue);
-    }, [direction, styles]);
+        onEntryTransitionEnd?.();
+    }, [onEntryTransitionEnd, previousStep]);
 
     return (
-        <Animatable.View
-            onAnimationEnd={() => {
-                if (!onAnimationEnd) {
-                    return;
-                }
-                onAnimationEnd();
-            }}
-            duration={CONST.ANIMATED_TRANSITION}
-            animation={animationStyle}
-            // eslint-disable-next-line react-compiler/react-compiler
-            useNativeDriver={useNativeDriver}
-            style={style}
-        >
-            {children}
-        </Animatable.View>
+        <Animated.View style={[styles.animatedStep, stepName === previousStep ? previousScreenAnimatedStyle : currentScreenAnimatedStyle]}>
+            <ScreenWrapper
+                shouldShowOfflineIndicator={false}
+                shouldEnableKeyboardAvoidingView={shouldEnableKeyboardAvoidingView}
+                shouldEnableMaxHeight
+                testID={AnimatedStep.displayName}
+            >
+                <HeaderWithBackButton
+                    title={title}
+                    stepCounter={stepCounter}
+                    onBackButtonPress={onBackButtonPress}
+                />
+                <FullPageOfflineBlockingView>{children}</FullPageOfflineBlockingView>
+            </ScreenWrapper>
+        </Animated.View>
     );
 }
 
 AnimatedStep.displayName = 'AnimatedStep';
+
 export default AnimatedStep;

src/components/Modal/BaseModal.tsx

@@ -14,9 +14,8 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import Overlay from '@libs/Navigation/AppNavigator/Navigators/Overlay';
-import useNativeDriver from '@libs/useNativeDriver';
 import variables from '@styles/variables';
-import * as Modal from '@userActions/Modal';
+import {areAllModalsHidden, closeTop, onModalDidClose, setCloseModal, setModalVisibility, willAlertModalBecomeVisible} from '@userActions/Modal';
 import CONST from '@src/CONST';
 import ModalContent from './ModalContent';
 import ModalContext from './ModalContext';
@@ -37,7 +36,7 @@ function BaseModal(
         fullscreen = true,
         animationIn,
         animationOut,
-        useNativeDriver: useNativeDriverProp,
+        useNativeDriver,
         useNativeDriverForBackdrop,
         hideModalContentWhileAnimating = false,
         animationInTiming,
@@ -85,16 +84,16 @@ function BaseModal(
      */
     const hideModal = useCallback(
         (callHideCallback = true) => {
-            if (Modal.areAllModalsHidden()) {
-                Modal.willAlertModalBecomeVisible(false);
+            if (areAllModalsHidden()) {
+                willAlertModalBecomeVisible(false);
                 if (shouldSetModalVisibility) {
-                    Modal.setModalVisibility(false);
+                    setModalVisibility(false);
                 }
             }
             if (callHideCallback) {
                 onModalHide();
             }
-            Modal.onModalDidClose();
+            onModalDidClose();
             ComposerFocusManager.refocusAfterModalFullyClosed(uniqueModalId, restoreFocusType);
         },
         [shouldSetModalVisibility, onModalHide, restoreFocusType, uniqueModalId],
@@ -104,9 +103,9 @@ function BaseModal(
         isVisibleRef.current = isVisible;
         let removeOnCloseListener: () => void;
         if (isVisible) {
-            Modal.willAlertModalBecomeVisible(true, type === CONST.MODAL.MODAL_TYPE.POPOVER || type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED);
+            willAlertModalBecomeVisible(true, type === CONST.MODAL.MODAL_TYPE.POPOVER || type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED);
             // To handle closing any modal already visible when this modal is mounted, i.e. PopoverReportActionContextMenu
-            removeOnCloseListener = Modal.setCloseModal(onClose);
+            removeOnCloseListener = setCloseModal(onClose);
         }
 
         return () => {
@@ -131,7 +130,7 @@ function BaseModal(
 
     const handleShowModal = () => {
         if (shouldSetModalVisibility) {
-            Modal.setModalVisibility(true);
+            setModalVisibility(true);
         }
         onModalShow();
     };
@@ -231,7 +230,7 @@ function BaseModal(
                     onBackdropPress={handleBackdropPress}
                     // Note: Escape key on web/desktop will trigger onBackButtonPress callback
                     // eslint-disable-next-line react/jsx-props-no-multi-spaces
-                    onBackButtonPress={Modal.closeTop}
+                    onBackButtonPress={closeTop}
                     onModalShow={handleShowModal}
                     propagateSwipe={propagateSwipe}
                     onModalHide={hideModal}
@@ -250,10 +249,8 @@ function BaseModal(
                     deviceWidth={windowWidth}
                     animationIn={animationIn ?? modalStyleAnimationIn}
                     animationOut={animationOut ?? modalStyleAnimationOut}
-                    // eslint-disable-next-line react-compiler/react-compiler
-                    useNativeDriver={useNativeDriverProp && useNativeDriver}
-                    // eslint-disable-next-line react-compiler/react-compiler
-                    useNativeDriverForBackdrop={useNativeDriverForBackdrop && useNativeDriver}
+                    useNativeDriver={useNativeDriver}
+                    useNativeDriverForBackdrop={useNativeDriverForBackdrop}
                     hideModalContentWhileAnimating={hideModalContentWhileAnimating}
                     animationInTiming={animationInTiming}
                     animationOutTiming={animationOutTiming}

src/components/Modal/index.tsx

@@ -69,6 +69,8 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
             onModalShow={showModal}
             avoidKeyboard={false}
             fullscreen={fullscreen}
+            useNativeDriver={false}
+            useNativeDriverForBackdrop={false}
             type={type}
         >
             {children}

src/libs/actions/Session/index.ts

@@ -1048,9 +1048,6 @@ function toggleTwoFactorAuth(enable: boolean, twoFactorAuthCode = '') {
             key: ONYXKEYS.ACCOUNT,
             value: {
                 isLoading: false,
-
-                // When disabling 2FA, the user needs to end up on the step that confirms the setting was disabled
-                twoFactorAuthStep: enable ? undefined : CONST.TWO_FACTOR_AUTH_STEPS.DISABLED,
             },
         },
     ];

src/libs/actions/TwoFactorAuthActions.ts

@@ -2,16 +2,12 @@ import Onyx from 'react-native-onyx';
 import Navigation from '@libs/Navigation/Navigation';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {Route} from '@src/ROUTES';
-import type {TwoFactorAuthStep} from '@src/types/onyx/Account';
 
 /**
  * Clear 2FA data if the flow is interrupted without finishing
  */
 function clearTwoFactorAuthData() {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: null, twoFactorAuthSecretKey: null, twoFactorAuthStep: null, codesAreCopied: false});
-}
-function setTwoFactorAuthStep(twoFactorAuthStep: TwoFactorAuthStep) {
-    Onyx.merge(ONYXKEYS.ACCOUNT, {twoFactorAuthStep});
+    Onyx.merge(ONYXKEYS.ACCOUNT, {recoveryCodes: null, twoFactorAuthSecretKey: null, codesAreCopied: false});
 }
 
 function setCodesAreCopied() {
@@ -23,4 +19,4 @@ function quitAndNavigateBack(backTo?: Route) {
     Navigation.goBack(backTo);
 }
 
-export {clearTwoFactorAuthData, setTwoFactorAuthStep, quitAndNavigateBack, setCodesAreCopied};
+export {clearTwoFactorAuthData, quitAndNavigateBack, setCodesAreCopied};