diff --git a/src/CONST.ts b/src/CONST.ts index 6a57738d06ec..9804ce484219 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -752,6 +752,7 @@ const CONST = { BOTTOM_DOCKED: 'bottom_docked', POPOVER: 'popover', RIGHT_DOCKED: 'right_docked', + ONBOARDING: 'onboarding', }, ANCHOR_ORIGIN_VERTICAL: { TOP: 'top', diff --git a/src/NAVIGATORS.ts b/src/NAVIGATORS.ts index 3bc9c5e57b9b..10e268b07520 100644 --- a/src/NAVIGATORS.ts +++ b/src/NAVIGATORS.ts @@ -7,5 +7,6 @@ export default { BOTTOM_TAB_NAVIGATOR: 'BottomTabNavigator', LEFT_MODAL_NAVIGATOR: 'LeftModalNavigator', RIGHT_MODAL_NAVIGATOR: 'RightModalNavigator', + ONBOARDING_MODAL_NAVIGATOR: 'OnboardingModalNavigator', FULL_SCREEN_NAVIGATOR: 'FullScreenNavigator', } as const; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index c41ef521661c..db7d6bc23c91 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -513,6 +513,8 @@ const ROUTES = { getRoute: (contentType: string, backTo?: string) => getUrlWithBackToParam(`referral/${contentType}`, backTo), }, PROCESS_MONEY_REQUEST_HOLD: 'hold-request-educational', + ONBOARDING_PERSONAL_DETAILS: 'onboarding/personal-details', + ONBOARDING_PURPOSE: 'onboarding/purpose', } as const; /** diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 18754a3513c1..820c04203354 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -118,6 +118,9 @@ const SCREENS = { REFERRAL: 'Referral', PROCESS_MONEY_REQUEST_HOLD: 'ProcessMoneyRequestHold', }, + ONBOARDING_MODAL: { + ONBOARDING: 'Onboarding', + }, SIGN_IN_WITH_APPLE_DESKTOP: 'AppleSignInDesktop', SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop', DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect', @@ -231,6 +234,10 @@ const SCREENS = { EDIT_CURRENCY: 'SplitDetails_Edit_Currency', }, + ONBOARDING: { + PERSONAL_DETAILS: 'Onboarding_Personal_Details', + PURPOSE: 'Onboarding_Purpose', + }, ONBOARD_ENGAGEMENT: { ROOT: 'Onboard_Engagement_Root', MANAGE_TEAMS_EXPENSES: 'Manage_Teams_Expenses', diff --git a/src/components/HeaderWithBackButton/index.tsx b/src/components/HeaderWithBackButton/index.tsx index fe214ae5b293..0f21ce32591d 100755 --- a/src/components/HeaderWithBackButton/index.tsx +++ b/src/components/HeaderWithBackButton/index.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, {useMemo} from 'react'; import {Keyboard, StyleSheet, View} from 'react-native'; import AvatarWithDisplayName from '@components/AvatarWithDisplayName'; import Header from '@components/Header'; @@ -99,7 +99,21 @@ function HeaderWithBackButton({ textStyles={titleColor ? [StyleUtils.getTextColorStyle(titleColor)] : []} /> ); - }, [StyleUtils, policy, progressBarPercentage, report, shouldEnableDetailPageNavigation, shouldShowAvatarWithDisplay, stepCounter, styles.progressBar, styles.progressBarWrapper, subtitle, title, titleColor, translate]); + }, [ + StyleUtils, + policy, + progressBarPercentage, + report, + shouldEnableDetailPageNavigation, + shouldShowAvatarWithDisplay, + stepCounter, + styles.progressBar, + styles.progressBarWrapper, + subtitle, + title, + titleColor, + translate, + ]); return ( variables.mobileResponsiveWidthBreakpoint}; +} diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.tsx b/src/libs/Navigation/AppNavigator/AuthScreens.tsx index 00c96d436496..47d34ccdbfc5 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.tsx +++ b/src/libs/Navigation/AppNavigator/AuthScreens.tsx @@ -1,7 +1,8 @@ -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'; +import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -40,6 +41,7 @@ import BottomTabNavigator from './Navigators/BottomTabNavigator'; import CentralPaneNavigator from './Navigators/CentralPaneNavigator'; import FullScreenNavigator from './Navigators/FullScreenNavigator'; import LeftModalNavigator from './Navigators/LeftModalNavigator'; +import OnboardingModalNavigator from './Navigators/OnboardingModalNavigator'; import RightModalNavigator from './Navigators/RightModalNavigator'; type AuthScreensProps = { @@ -153,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) { @@ -264,6 +268,11 @@ function AuthScreens({session, lastOpenedPublicRoomID, isUsingMemoryOnlyKeys = f return ( + (); + +function OnboardingModalNavigator() { + const styles = useThemeStyles(); + const screenOptions = useMemo(() => OnboardingModalNavigatorScreenOptions(styles), [styles]); + const {shouldUseNarrowLayout} = useOnboardingLayout(); + + return ( + + {}} /> + + + + + + + + + + ); +} + +OnboardingModalNavigator.displayName = 'OnboardingModalNavigator'; + +export default OnboardingModalNavigator; diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx index 5462b6c0ce4e..6917df30ce26 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx @@ -1,14 +1,16 @@ import {useCardAnimation} from '@react-navigation/stack'; -import React from 'react'; +import React, {useMemo} from 'react'; import {Animated, View} from 'react-native'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import useLocalize from '@hooks/useLocalize'; +import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useThemeStyles from '@hooks/useThemeStyles'; +import getOperatingSystem from '@libs/getOperatingSystem'; import CONST from '@src/CONST'; type OverlayProps = { /* Callback to close the modal */ - onPress: () => void; + onPress?: () => void; /* Returns whether a modal is displayed on the left side of the screen. By default, the modal is displayed on the right */ isModalOnTheLeft?: boolean; @@ -18,9 +20,19 @@ function Overlay({onPress, isModalOnTheLeft = false}: OverlayProps) { const styles = useThemeStyles(); const {current} = useCardAnimation(); const {translate} = useLocalize(); + const {shouldUseNarrowLayout} = useOnboardingLayout(); + + // non-native styling uses fixed positioning not supported on native platforms + const shouldUseNativeStyles = useMemo(() => { + const os = getOperatingSystem(); + if ((os === CONST.OS.ANDROID || os === CONST.OS.IOS || os === CONST.OS.NATIVE) && shouldUseNarrowLayout) { + return true; + } + return false; + }, [shouldUseNarrowLayout]); return ( - + {/* In the latest Electron version buttons can't be both clickable and draggable. That's why we added this workaround. Because of two Pressable components on the desktop app diff --git a/src/libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions.ts new file mode 100644 index 000000000000..b824afd30cd5 --- /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..21911ebb56e2 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,15 @@ 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 5685afec5459..aa38492112b9 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts @@ -1,4 +1,5 @@ import type {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack'; +import type {ViewStyle} from 'react-native'; import type {ThemeStyles} from '@styles/index'; import type {StyleUtilsType} from '@styles/utils'; import variables from '@styles/variables'; @@ -6,7 +7,17 @@ import CONFIG from '@src/CONFIG'; import createModalCardStyleInterpolator from './createModalCardStyleInterpolator'; import getRightModalNavigatorOptions from './getRightModalNavigatorOptions'; -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, @@ -27,11 +38,27 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr rightModalNavigator: { ...commonScreenOptions, ...getRightModalNavigatorOptions(isSmallScreenWidth), - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props), }, + onboardingModalNavigator: (shouldUseNarrowLayout: boolean) => ({ + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, shouldUseNarrowLayout, props), + headerShown: 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: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER), + cardStyleInterpolator: (props: StackCardInterpolationProps) => 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 @@ -50,7 +77,7 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr title: CONFIG.SITE_TITLE, ...commonScreenOptions, // Note: The card* properties won't be applied on mobile platforms, as they use the native defaults. - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), + cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, false, props), cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, @@ -64,7 +91,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(), @@ -77,7 +104,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), // temporary solution - better to hide a keyboard than see keyboard flickering // see https://github.com/software-mansion/react-native-screens/issues/2021 for more details keyboardHandlingEnabled: true, @@ -89,7 +116,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/libs/Navigation/linkingConfig/config.ts b/src/libs/Navigation/linkingConfig/config.ts index 2640025efa09..dd4ebcdfd0cd 100644 --- a/src/libs/Navigation/linkingConfig/config.ts +++ b/src/libs/Navigation/linkingConfig/config.ts @@ -80,6 +80,18 @@ const config: LinkingOptions['config'] = { }, }, }, + [NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: { + screens: { + [SCREENS.ONBOARDING.PERSONAL_DETAILS]: { + path: ROUTES.ONBOARDING_PERSONAL_DETAILS, + exact: true, + }, + [SCREENS.ONBOARDING.PURPOSE]: { + path: ROUTES.ONBOARDING_PURPOSE, + exact: true, + }, + }, + }, [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: { screens: { [SCREENS.RIGHT_MODAL.SETTINGS]: { diff --git a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts index e7c5466852cf..fecfa4c2995a 100644 --- a/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts +++ b/src/libs/Navigation/linkingConfig/getAdaptedStateFromPath.ts @@ -151,6 +151,8 @@ function getAdaptedState(state: PartialState const fullScreenNavigator = state.routes.find((route) => route.name === NAVIGATORS.FULL_SCREEN_NAVIGATOR); const rhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.RIGHT_MODAL_NAVIGATOR); const lhpNavigator = state.routes.find((route) => route.name === NAVIGATORS.LEFT_MODAL_NAVIGATOR); + const onboardingModalNavigator = state.routes.find((route) => route.name === NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR); + if (rhpNavigator) { // Routes // - matching bottom tab @@ -183,13 +185,13 @@ function getAdaptedState(state: PartialState metainfo, }; } - if (lhpNavigator) { + if (lhpNavigator ?? onboardingModalNavigator) { // Routes // - default bottom tab // - default central pane on desktop layout - // - found lhp + // - found lhp / onboardingModalNavigator - // Currently there is only the search and workspace switcher in LHP both can have any central pane under the overlay. + // There is no screen in these navigators that would have mandatory central pane, bottom tab or fullscreen navigator. metainfo.isCentralPaneAndBottomTabMandatory = false; metainfo.isFullScreenNavigatorMandatory = false; const routes = []; @@ -208,7 +210,15 @@ function getAdaptedState(state: PartialState }), ); } - routes.push(lhpNavigator); + + // Separate ifs are necessary for typescript to see that we are not pushing unedinfed to the array. + if (lhpNavigator) { + routes.push(lhpNavigator); + } + + if (onboardingModalNavigator) { + routes.push(onboardingModalNavigator); + } return { adaptedState: getRoutesWithIndex(routes), @@ -272,6 +282,10 @@ function getAdaptedState(state: PartialState const matchingCentralPaneRoute = getMatchingCentralPaneRouteForState(state); if (matchingCentralPaneRoute) { routes.push(createCentralPaneNavigator(matchingCentralPaneRoute)); + } else { + // If there is no matching central pane, we want to add the default one. + metainfo.isCentralPaneAndBottomTabMandatory = false; + routes.push(createCentralPaneNavigator({name: SCREENS.REPORT})); } return { @@ -300,6 +314,7 @@ const getAdaptedStateFromPath: GetAdaptedStateFromPath = (path, options) => { if (state === undefined) { throw new Error('Unable to parse path'); } + return getAdaptedState(state, policyID); }; diff --git a/src/libs/Navigation/types.ts b/src/libs/Navigation/types.ts index 4fd218d4fd42..5b0b5ff3f630 100644 --- a/src/libs/Navigation/types.ts +++ b/src/libs/Navigation/types.ts @@ -462,6 +462,12 @@ type FullScreenNavigatorParamList = { [SCREENS.SETTINGS_CENTRAL_PANE]: NavigatorScreenParams; }; +type OnboardingModalNavigatorParamList = { + [SCREENS.ONBOARDING_MODAL.ONBOARDING]: undefined; + [SCREENS.ONBOARDING.PERSONAL_DETAILS]: undefined; + [SCREENS.ONBOARDING.PURPOSE]: undefined; +}; + type BottomTabNavigatorParamList = { [SCREENS.HOME]: undefined; [SCREENS.ALL_SETTINGS]: undefined; @@ -522,6 +528,7 @@ type AuthScreensParamList = { [NAVIGATORS.LEFT_MODAL_NAVIGATOR]: NavigatorScreenParams; [NAVIGATORS.RIGHT_MODAL_NAVIGATOR]: NavigatorScreenParams; [NAVIGATORS.FULL_SCREEN_NAVIGATOR]: NavigatorScreenParams; + [NAVIGATORS.ONBOARDING_MODAL_NAVIGATOR]: NavigatorScreenParams; [SCREENS.DESKTOP_SIGN_IN_REDIRECT]: undefined; }; @@ -555,6 +562,7 @@ export type { BottomTabNavigatorParamList, LeftModalNavigatorParamList, RightModalNavigatorParamList, + OnboardingModalNavigatorParamList, PublicScreensParamList, MoneyRequestNavigatorParamList, SplitDetailsNavigatorParamList, diff --git a/src/pages/OnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails.tsx new file mode 100644 index 000000000000..8edce006c5d0 --- /dev/null +++ b/src/pages/OnboardingPersonalDetails.tsx @@ -0,0 +1,38 @@ +import React, {useCallback} from 'react'; +import {View} from 'react-native'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import useOnboardingLayout from '@hooks/useOnboardingLayout'; +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'; + +function OnboardingPersonalDetails() { + const styles = useThemeStyles(); + const {windowHeight} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useOnboardingLayout(); + const theme = useTheme(); + + const closeModal = useCallback(() => { + Report.dismissEngagementModal(); + Navigation.goBack(); + }, []); + + return ( + + + + + + ); +} + +OnboardingPersonalDetails.displayName = 'OnboardingPersonalDetails'; +export default OnboardingPersonalDetails; diff --git a/src/pages/OnboardingPurpose.tsx b/src/pages/OnboardingPurpose.tsx new file mode 100644 index 000000000000..799581a353b0 --- /dev/null +++ b/src/pages/OnboardingPurpose.tsx @@ -0,0 +1,38 @@ +import React, {useCallback} from 'react'; +import {View} from 'react-native'; +import HeaderWithBackButton from '@components/HeaderWithBackButton'; +import useOnboardingLayout from '@hooks/useOnboardingLayout'; +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'; + +function OnboardingPurpose() { + const styles = useThemeStyles(); + const {windowHeight} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useOnboardingLayout(); + const theme = useTheme(); + + const closeModal = useCallback(() => { + Report.dismissEngagementModal(); + Navigation.goBack(); + }, []); + + return ( + + + + + + ); +} + +OnboardingPurpose.displayName = 'OnboardingPurpose'; +export default OnboardingPurpose; diff --git a/src/styles/index.ts b/src/styles/index.ts index dbbe1d1663e3..ac33ff287e9b 100644 --- a/src/styles/index.ts +++ b/src/styles/index.ts @@ -1515,6 +1515,20 @@ const styles = (theme: ThemeColors) => right: 0, } satisfies ViewStyle), + onboardingNavigatorOuterView: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + }, + + OnboardingNavigatorInnerView: (shouldUseNarrowLayout: boolean) => + ({ + width: shouldUseNarrowLayout ? 500 : '100%', + height: shouldUseNarrowLayout ? 712 : '100%', + borderRadius: shouldUseNarrowLayout ? 16 : 0, + overflow: 'hidden', + } satisfies ViewStyle), + onlyEmojisText: { fontSize: variables.fontSizeOnlyEmojis, lineHeight: variables.fontSizeOnlyEmojisHeight, @@ -1749,6 +1763,19 @@ const styles = (theme: ThemeColors) => }), } satisfies ViewStyle), + nativeOverlayStyles: (current: OverlayStylesParams) => + ({ + position: 'absolute', + backgroundColor: theme.overlay, + width: '100%', + height: '100%', + opacity: current.progress.interpolate({ + inputRange: [0, 1], + outputRange: [0, variables.overlayOpacity], + extrapolate: 'clamp', + }), + } satisfies ViewStyle), + appContent: { backgroundColor: theme.appBG, overflow: 'hidden', @@ -2714,6 +2741,12 @@ const styles = (theme: ThemeColors) => height: '100%', }, + navigationOnboardingScreenCardStyle: { + backgroundColor: 'transparent', + width: '100%', + height: '100%', + }, + invisible: { position: 'absolute', opacity: 0,