diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index cc17fcf07f4f..d7c591c0f128 100644 --- 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 ( 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 index 9b40f5748f53..e263b47c0145 100644 --- 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(); function OnboardingModalNavigator() { const styles = useThemeStyles(); - const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]); + const screenOptions = useMemo(() => OnboardingModalNavigatorScreenOptions(styles) ,[styles]); + const {shouldUseNarrowLayout} = useOnboardingLayout(); return ( - - + {}}/> + + + + /> + /> + ); } diff --git a/src/libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions.ts new file mode 100644 index 000000000000..a546a95b300b --- /dev/null +++ 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 index 7a88976b3e03..2443236801cd 100644 --- a/src/libs/Navigation/AppNavigator/createModalCardStyleInterpolator.ts +++ b/src/libs/Navigation/AppNavigator/createModalCardStyleInterpolator.ts @@ -6,6 +6,7 @@ import variables from '@styles/variables'; type ModalCardStyleInterpolator = ( isSmallScreenWidth: boolean, isFullScreenModal: boolean, + shouldUseNarrowLayout: boolean, stackCardInterpolationProps: StackCardInterpolationProps, outputRangeMultiplier?: number, ) => StackCardInterpolatedStyle; @@ -13,7 +14,16 @@ type CreateModalCardStyleInterpolator = (StyleUtils: StyleUtilsType) => ModalCar 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 index 26e5829d82e5..cb99a518c811 100644 --- 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; +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 index 370c8d10cbd1..83182395c616 100644 --- 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 ( - - - - - + + + + { + Navigation.navigate(ROUTES.ONBOARDING_PURPOSE); + }} + > + + + ); } diff --git a/src/pages/OnboardingPurpose.tsx b/src/pages/OnboardingPurpose.tsx index 9ad9c0d74334..20e03c72bd32 100644 --- 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 ( - - - - - + + + + + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 6d87f3155ea9..c95e4db6f181 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1501,6 +1501,21 @@ const styles = (theme: ThemeColors) => right: 0, } satisfies ViewStyle), + OnboardingNavigatorOuterView: (shouldUseNarrowLayout: boolean) => + ({ + flex: shouldUseNarrowLayout ? 1 : undefined, + justifyContent: shouldUseNarrowLayout ? 'center' : undefined, + alignItems: shouldUseNarrowLayout ? 'center' : undefined, + } satisfies ViewStyle), + + OnboardingNavigatorInnerView: (shouldUseNarrowLayout: boolean) => + ({ + width: shouldUseNarrowLayout ? 500 : undefined, + height: shouldUseNarrowLayout ? 712 : undefined, + borderRadius: shouldUseNarrowLayout ? 16 : undefined, + overflow: 'hidden', + } satisfies ViewStyle), + onlyEmojisText: { fontSize: variables.fontSizeOnlyEmojis, lineHeight: variables.fontSizeOnlyEmojisHeight, @@ -1737,6 +1752,7 @@ const styles = (theme: ThemeColors) => nativeOverlayStyles: (current: OverlayStylesParams) => ({ + position: 'absolute', backgroundColor: theme.overlay, width: '100%', height: '100%', @@ -2712,6 +2728,12 @@ const styles = (theme: ThemeColors) => height: '100%', }, + navigationOnboardingScreenCardStyle: { + backgroundColor: 'transparent', + width: '100%', + height: '100%', + }, + invisible: { position: 'absolute', opacity: 0,