Remove usage of Modal from OnboardingNavigator

software-mansion-labs · Feb 15, 2024 · 2168af6 · 2168af6
1 parent cbe1201
commit 2168af6
Show file tree

Hide file tree

Showing 9 changed files with 139 additions and 76 deletions.
diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx
@@ -1,4 +1,4 @@
-import React, {memo, useEffect, useRef} from 'react';
+import React, {memo, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
 import type {OnyxEntry} from 'react-native-onyx';
 import Onyx, {withOnyx} from 'react-native-onyx';
@@ -33,6 +33,7 @@ import ROUTES from '@src/ROUTES';
 import SCREENS from '@src/SCREENS';
 import type * as OnyxTypes from '@src/types/onyx';
 import type {SelectedTimezone, Timezone} from '@src/types/onyx/PersonalDetails';
+import useOnboardingLayout from '@hooks/useOnboardingLayout';
 import createCustomStackNavigator from './createCustomStackNavigator';
 import defaultScreenOptions from './defaultScreenOptions';
 import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
@@ -154,7 +155,9 @@ function AuthScreens({session, lastOpenedPublicRoomID, isUsingMemoryOnlyKeys = f
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {isSmallScreenWidth} = useWindowDimensions();
+    const {shouldUseNarrowLayout} = useOnboardingLayout();
     const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles, StyleUtils);
+    const onboardingScreenOptions = useMemo(() => screenOptions.onboardingModalNavigator(shouldUseNarrowLayout), [screenOptions, shouldUseNarrowLayout]);
     const isInitialRender = useRef(true);
 
     if (isInitialRender.current) {
@@ -257,20 +260,17 @@ function AuthScreens({session, lastOpenedPublicRoomID, isUsingMemoryOnlyKeys = f
             unsubscribeChatShortcut();
             Session.cleanupSession();
         };
-        
+
         // Rule disabled because this effect is only for component did mount & will component unmount lifecycle event
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    
+
     return (
         <View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
             <RootStack.Navigator isSmallScreenWidth={isSmallScreenWidth}>
                 <RootStack.Screen
                     name={NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR}
-                    options={{
-                        headerShown: false,
-                        presentation: 'transparentModal',
-                    }}
+                    options={onboardingScreenOptions}
                     component={OnboardingModalNavigator}
                 />
                 <RootStack.Screen

diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx
@@ -295,11 +295,6 @@ const ProcessMoneyRequestHoldStackNavigator = createModalStackNavigator({
     [SCREENS.PROCESS_MONEY_REQUEST_HOLD_ROOT]: () => require('../../../pages/ProcessMoneyRequestHoldPage').default as React.ComponentType,
 });
 
-const OnboardingModalStackNavigator = createModalStackNavigator({
-    [SCREENS.ONBOARDING.PERSONAL_DETAILS]: () => require('../../../../src/components/PurposeForUsingExpensifyModal').default as React.ComponentType,
-    [SCREENS.ONBOARDING.PURPOSE]: () => require('../../../../src/components/PurposeForUsingExpensifyModal').default as React.ComponentType,
-});
-
 export {
     AccountSettingsModalStackNavigator,
     AddPersonalBankAccountModalStackNavigator,
@@ -330,5 +325,4 @@ export {
     TaskModalStackNavigator,
     WalletStatementStackNavigator,
     ProcessMoneyRequestHoldStackNavigator,
-    OnboardingModalStackNavigator,
 };
diff --git a/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx
@@ -3,32 +3,38 @@ import React, {useMemo} from 'react';
 import {View} from 'react-native';
 import NoDropZone from '@components/DragAndDrop/NoDropZone';
 import useThemeStyles from '@hooks/useThemeStyles';
-import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
+import OnboardingModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions';
 import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types';
 import OnboardingPersonalDetails from '@pages/OnboardingPersonalDetails';
 import OnboardingPurpose from '@pages/OnboardingPurpose';
 import SCREENS from '@src/SCREENS';
+import useOnboardingLayout from '@hooks/useOnboardingLayout';
+import Overlay from './Overlay';
 
 const Stack = createStackNavigator<OnboardingModalNavigatorParamList>();
 
 function OnboardingModalNavigator() {
     const styles = useThemeStyles();
-    const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]);
+    const screenOptions = useMemo(() => OnboardingModalNavigatorScreenOptions(styles) ,[styles]);
+    const {shouldUseNarrowLayout} = useOnboardingLayout();
 
     return (
         <NoDropZone>
-            <View>
-                <Stack.Navigator screenOptions={{...screenOptions}}>
+            <Overlay onPress={() => {}}/>
+            <View style={styles.OnboardingNavigatorOuterView(shouldUseNarrowLayout)}>
+            <View style={styles.OnboardingNavigatorInnerView(shouldUseNarrowLayout)}>
+                <Stack.Navigator screenOptions={screenOptions}>
                     <Stack.Screen
                         name={SCREENS.ONBOARDING.PERSONAL_DETAILS}
                         component={OnboardingPersonalDetails}
-                    />
+                        />
                     <Stack.Screen
                         name={SCREENS.ONBOARDING.PURPOSE}
                         component={OnboardingPurpose}
-                    />
+                        />
                 </Stack.Navigator>
             </View>
+        </View>
         </NoDropZone>
     );
 }

diff --git a/src/libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions.ts
@@ -0,0 +1,18 @@
+import type {StackNavigationOptions} from '@react-navigation/stack';
+import {CardStyleInterpolators} from '@react-navigation/stack';
+import type { ThemeStyles } from '@styles/index';
+
+/**
+ * Modal stack navigator screen options generator function
+ * @returns The screen options object
+ */
+const OnboardingModalNavigatorScreenOptions = (themeStyles: ThemeStyles): StackNavigationOptions => ({
+    headerShown: false,
+    animationEnabled: true,
+    gestureDirection: 'horizontal',
+    cardStyle: themeStyles.navigationOnboardingScreenCardStyle,
+    cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
+    presentation: 'transparentModal',
+});
+
+export default OnboardingModalNavigatorScreenOptions;
diff --git a/src/libs/Navigation/AppNavigator/createModalCardStyleInterpolator.ts b/src/libs/Navigation/AppNavigator/createModalCardStyleInterpolator.ts
@@ -6,14 +6,24 @@ import variables from '@styles/variables';
 type ModalCardStyleInterpolator = (
     isSmallScreenWidth: boolean,
     isFullScreenModal: boolean,
+    shouldUseNarrowLayout: boolean,
     stackCardInterpolationProps: StackCardInterpolationProps,
     outputRangeMultiplier?: number,
 ) => StackCardInterpolatedStyle;
 type CreateModalCardStyleInterpolator = (StyleUtils: StyleUtilsType) => ModalCardStyleInterpolator;
 
 const createModalCardStyleInterpolator: CreateModalCardStyleInterpolator =
     (StyleUtils) =>
-    (isSmallScreenWidth, isFullScreenModal, {current: {progress}, inverted, layouts: {screen}}, outputRangeMultiplier = 1) => {
+    (isSmallScreenWidth, isFullScreenModal, shouldUseNarrowLayout, {current: {progress}, inverted, layouts: {screen}}, outputRangeMultiplier = 1) => {
+
+        if(shouldUseNarrowLayout) {
+            return {
+                cardStyle: {
+                    opacity: progress,
+                },
+            };
+        }
+
         const translateX = Animated.multiply(
             progress.interpolate({
                 inputRange: [0, 1],

diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts
@@ -3,9 +3,20 @@ import type {ThemeStyles} from '@styles/index';
 import type {StyleUtilsType} from '@styles/utils';
 import variables from '@styles/variables';
 import CONFIG from '@src/CONFIG';
+import type { ViewStyle } from 'react-native';
 import createModalCardStyleInterpolator from './createModalCardStyleInterpolator';
 
-type ScreenOptions = Record<string, StackNavigationOptions>;
+type GetOnboardingModalNavigatorOptions = (shouldUseNarrowLayout: boolean) => StackNavigationOptions;
+
+type ScreenOptions = {
+    rightModalNavigator: StackNavigationOptions,
+    onboardingModalNavigator: GetOnboardingModalNavigatorOptions,
+    leftModalNavigator: StackNavigationOptions,
+    homeScreen: StackNavigationOptions,
+    fullScreen: StackNavigationOptions,
+    centralPaneNavigator: StackNavigationOptions,
+    bottomTab: StackNavigationOptions,
+}
 
 const commonScreenOptions: StackNavigationOptions = {
     headerShown: false,
@@ -20,12 +31,12 @@ const SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER = -1;
 type GetRootNavigatorScreenOptions = (isSmallScreenWidth: boolean, styles: ThemeStyles, StyleUtils: StyleUtilsType) => ScreenOptions;
 
 const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScreenWidth, themeStyles, StyleUtils) => {
-    const modalCardStyleInterpolator = createModalCardStyleInterpolator(StyleUtils);
+    const modalCardStyleInterpolator = createModalCardStyleInterpolator(StyleUtils); 
 
     return {
         rightModalNavigator: {
             ...commonScreenOptions,
-            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props),
             presentation: 'transparentModal',
 
             // We want pop in RHP since there are some flows that would work weird otherwise
@@ -39,18 +50,25 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr
                 right: 0,
             },
         },
-        onboardingModalNavigator: {
+        onboardingModalNavigator: (shouldUseNarrowLayout: boolean) => ({
+            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, shouldUseNarrowLayout, props),
             headerShown: false,
-            detachPreviousScreen: false,
-            animationEnabled: false,
+            animationEnabled: true,
+            cardOverlayEnabled: false,
             presentation: 'transparentModal',
             cardStyle: {
+                ...StyleUtils.getNavigationModalCardStyle(),
                 backgroundColor: 'transparent',
+                width: '100%',
+                top: 0,
+                left: 0,
+                // We need to guarantee that it covers BottomTabBar on web, but fixed position is not supported in react native.
+                position: 'fixed' as ViewStyle['position'],
             },
-        },
+        }),
         leftModalNavigator: {
             ...commonScreenOptions,
-            cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER),
+            cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER),
             presentation: 'transparentModal',
 
             // We want pop in LHP since there are some flows that would work weird otherwise
@@ -68,7 +86,7 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr
         homeScreen: {
             title: CONFIG.SITE_TITLE,
             ...commonScreenOptions,
-            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props),
 
             cardStyle: {
                 ...StyleUtils.getNavigationModalCardStyle(),
@@ -82,7 +100,7 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr
 
         fullScreen: {
             ...commonScreenOptions,
-            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
+            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, false, props),
             cardStyle: {
                 ...StyleUtils.getNavigationModalCardStyle(),
 
@@ -95,7 +113,7 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr
             title: CONFIG.SITE_TITLE,
             ...commonScreenOptions,
             animationEnabled: isSmallScreenWidth,
-            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, props),
+            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, false, props),
 
             cardStyle: {
                 ...StyleUtils.getNavigationModalCardStyle(),
@@ -105,7 +123,7 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr
 
         bottomTab: {
             ...commonScreenOptions,
-            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props),
+            cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props),
 
             cardStyle: {
                 ...StyleUtils.getNavigationModalCardStyle(),

diff --git a/src/pages/OnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails.tsx
@@ -1,44 +1,48 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import Modal from '@components/Modal';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Report from '@userActions/Report';
-import CONST from '@src/CONST';
+import { PressableWithFeedback } from '@components/Pressable';
+import ROUTES from '@src/ROUTES';
 
 function OnboardingPersonalDetails() {
     const styles = useThemeStyles();
     const {windowHeight} = useWindowDimensions();
-    const [isModalOpen, setIsModalOpen] = useState(true);
     const theme = useTheme();
 
     const closeModal = useCallback(() => {
         Report.dismissEngagementModal();
         Navigation.goBack();
-        setIsModalOpen(false);
     }, []);
 
     return (
-        <Modal
-            type={CONST.MODAL.MODAL_TYPE.ONBOARDING}
-            isVisible={isModalOpen}
-            onClose={closeModal}
-            innerContainerStyle={styles.pt0}
-            shouldUseCustomBackdrop
+        <View
+            style={[styles.defaultModalContainer, {width: '100%', height: '100%', backgroundColor: 'blue'}]}
         >
-            <View style={{maxHeight: windowHeight}}>
-                <HeaderWithBackButton
-                    shouldShowCloseButton
-                    shouldShowBackButton={false}
-                    onCloseButtonPress={closeModal}
-                    shouldOverlay
-                    iconFill={theme.iconColorfulBackground}
-                />
-            </View>
-        </Modal>
+                <View style={{maxHeight: windowHeight}}>
+                    <HeaderWithBackButton
+                        shouldShowCloseButton
+                        shouldShowBackButton={false}
+                        onCloseButtonPress={closeModal}
+                        shouldOverlay
+                        iconFill={theme.iconColorfulBackground}
+                    />
+                </View>
+                <PressableWithFeedback
+                style={{marginTop: 100, width: 100, height: 100}}
+                accessibilityLabel='TEST'
+                accessible
+                onPress={() => {
+                        Navigation.navigate(ROUTES.ONBOARDING_PURPOSE);
+                }}
+            >
+                <View style={{width: 100, height: 100, backgroundColor: 'red'}} />
+            </PressableWithFeedback>
+        </View>
     );
 }
 

diff --git a/src/pages/OnboardingPurpose.tsx b/src/pages/OnboardingPurpose.tsx
@@ -1,46 +1,37 @@
-import React, {useCallback, useState} from 'react';
+import React, {useCallback} from 'react';
 import {View} from 'react-native';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
-import Modal from '@components/Modal';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import Navigation from '@libs/Navigation/Navigation';
 import * as Report from '@userActions/Report';
-import CONST from '@src/CONST';
 
 function OnboardingPurpose() {
     const styles = useThemeStyles();
     const {windowHeight} = useWindowDimensions();
-    const [isModalOpen, setIsModalOpen] = useState(true);
     const theme = useTheme();
 
     const closeModal = useCallback(() => {
         Report.dismissEngagementModal();
         Navigation.goBack();
-        setIsModalOpen(false);
     }, []);
 
     return (
-        <Modal
-            type={CONST.MODAL.MODAL_TYPE.ONBOARDING}
-            isVisible={isModalOpen}
-            onClose={closeModal}
-            innerContainerStyle={styles.pt0}
-            shouldUseCustomBackdrop
-            // This prevents stacking of transparent overlays
-            shouldForceHideBackdrop
+        <View
+            style={[styles.defaultModalContainer, {width: '100%', height: '100%'}]}
         >
-            <View style={{maxHeight: windowHeight}}>
-                <HeaderWithBackButton
-                    shouldShowCloseButton
-                    shouldShowBackButton={false}
-                    onCloseButtonPress={closeModal}
-                    shouldOverlay
-                    iconFill={theme.iconColorfulBackground}
-                />
-            </View>
-        </Modal>
+                <View style={{maxHeight: windowHeight}}>
+                    <HeaderWithBackButton
+                        shouldShowCloseButton
+                        shouldShowBackButton={false}
+                        onCloseButtonPress={closeModal}
+                        shouldOverlay
+                        iconFill={theme.iconColorfulBackground}
+                    />
+                </View>
+
+        </View>
     );
 }