Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adjust designs for medium sized screens
- Loading branch information
1 parent
30b7411
commit 1895d18
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // eslint-disable-next-line no-restricted-imports | ||
| import {useWindowDimensions} from 'react-native'; | ||
| import variables from '@styles/variables'; | ||
|
|
||
| type OnboardingLayout = { | ||
| shouldUseNarrowLayout: boolean; | ||
| }; | ||
|
|
||
| /** | ||
| * Onboarding layout for medium screen width is narrowed similarly as on web/desktop. | ||
| */ | ||
| export default function useOnboardingLayout(): OnboardingLayout { | ||
| const {width: windowWidth} = useWindowDimensions(); | ||
|
|
||
| return {shouldUseNarrowLayout: windowWidth > variables.mobileResponsiveWidthBreakpoint}; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,45 +1,38 @@ | ||
| import {createStackNavigator} from '@react-navigation/stack'; | ||
| 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 type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types'; | ||
| import OnboardingPersonalDetails from '@pages/OnboardingPersonalDetails'; | ||
| import OnboardingPurpose from '@pages/OnboardingPurpose'; | ||
| import SCREENS from '@src/SCREENS'; | ||
|
|
||
| const Stack = createStackNavigator<OnboardingModalNavigatorParamList>(); | ||
|
|
||
| function OnboardingModalNavigator() { | ||
| const styles = useThemeStyles(); | ||
| const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]); | ||
|
|
||
| return ( | ||
| <NoDropZone> | ||
| <View> | ||
| <Stack.Navigator screenOptions={{...screenOptions}}> | ||
| <Stack.Screen | ||
| name={SCREENS.ONBOARDING.PERSONAL_DETAILS} | ||
| component={OnboardingPersonalDetails} | ||
| /> | ||
| <Stack.Screen | ||
| name={SCREENS.ONBOARDING.PURPOSE} | ||
| component={OnboardingPurpose} | ||
| /> | ||
| </Stack.Navigator> | ||
| </View> | ||
| </NoDropZone> | ||
| ); | ||
| } | ||
|
|
||
| OnboardingModalNavigator.displayName = 'OnboardingModalNavigator'; | ||
|
|
||
| export default OnboardingModalNavigator; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import React, {useCallback, useState} 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 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={{maxHeight: windowHeight}}> | ||
| <HeaderWithBackButton | ||
| shouldShowCloseButton | ||
| shouldShowBackButton={false} | ||
| onCloseButtonPress={closeModal} | ||
| shouldOverlay | ||
| iconFill={theme.iconColorfulBackground} | ||
| /> | ||
| </View> | ||
| </Modal> | ||
| ); | ||
| } | ||
|
|
||
| OnboardingPersonalDetails.displayName = 'OnboardingPersonalDetails'; | ||
| export default OnboardingPersonalDetails; |
Oops, something went wrong.