diff --git a/package-lock.json b/package-lock.json index 5fe54d0f27a7..f1d4b122478f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -38,7 +38,6 @@ "@react-native-picker/picker": "2.5.1", "@react-navigation/material-top-tabs": "^6.6.3", "@react-navigation/native": "6.1.8", - "@react-navigation/native-stack": "^6.9.17", "@react-navigation/stack": "6.3.16", "@react-ng/bounds-observer": "^0.2.1", "@rnmapbox/maps": "^10.1.11", @@ -10257,17 +10256,6 @@ "react": "*" } }, - "node_modules/@react-navigation/elements": { - "version": "1.3.21", - "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.21.tgz", - "integrity": "sha512-eyS2C6McNR8ihUoYfc166O1D8VYVh9KIl0UQPI8/ZJVsStlfSTgeEEh+WXge6+7SFPnZ4ewzEJdSAHH+jzcEfg==", - "peerDependencies": { - "@react-navigation/native": "^6.0.0", - "react": "*", - "react-native": "*", - "react-native-safe-area-context": ">= 3.0.0" - } - }, "node_modules/@react-navigation/material-top-tabs": { "version": "6.6.3", "resolved": "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.6.3.tgz", @@ -10299,22 +10287,6 @@ "react-native": "*" } }, - "node_modules/@react-navigation/native-stack": { - "version": "6.9.17", - "resolved": "https://registry.npmjs.org/@react-navigation/native-stack/-/native-stack-6.9.17.tgz", - "integrity": "sha512-X8p8aS7JptQq7uZZNFEvfEcPf6tlK4PyVwYDdryRbG98B4bh2wFQYMThxvqa+FGEN7USEuHdv2mF0GhFKfX0ew==", - "dependencies": { - "@react-navigation/elements": "^1.3.21", - "warn-once": "^0.1.0" - }, - "peerDependencies": { - "@react-navigation/native": "^6.0.0", - "react": "*", - "react-native": "*", - "react-native-safe-area-context": ">= 3.0.0", - "react-native-screens": ">= 3.0.0" - } - }, "node_modules/@react-navigation/routers": { "version": "6.1.9", "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-6.1.9.tgz", @@ -10341,6 +10313,17 @@ "react-native-screens": ">= 3.0.0" } }, + "node_modules/@react-navigation/stack/node_modules/@react-navigation/elements": { + "version": "1.3.17", + "resolved": "https://registry.npmjs.org/@react-navigation/elements/-/elements-1.3.17.tgz", + "integrity": "sha512-sui8AzHm6TxeEvWT/NEXlz3egYvCUog4tlXA4Xlb2Vxvy3purVXDq/XsM56lJl344U5Aj/jDzkVanOTMWyk4UA==", + "peerDependencies": { + "@react-navigation/native": "^6.0.0", + "react": "*", + "react-native": "*", + "react-native-safe-area-context": ">= 3.0.0" + } + }, "node_modules/@react-ng/bounds-observer": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/@react-ng/bounds-observer/-/bounds-observer-0.2.1.tgz", diff --git a/package.json b/package.json index 66ebe720a448..e31931f0bd2b 100644 --- a/package.json +++ b/package.json @@ -86,7 +86,6 @@ "@react-native-picker/picker": "2.5.1", "@react-navigation/material-top-tabs": "^6.6.3", "@react-navigation/native": "6.1.8", - "@react-navigation/native-stack": "^6.9.17", "@react-navigation/stack": "6.3.16", "@react-ng/bounds-observer": "^0.2.1", "@rnmapbox/maps": "^10.1.11", diff --git a/patches/@react-navigation+native-stack+6.9.17.patch b/patches/@react-navigation+native-stack+6.9.17.patch deleted file mode 100644 index 933ca6ce792e..000000000000 --- a/patches/@react-navigation+native-stack+6.9.17.patch +++ /dev/null @@ -1,39 +0,0 @@ -diff --git a/node_modules/@react-navigation/native-stack/src/types.tsx b/node_modules/@react-navigation/native-stack/src/types.tsx -index 206fb0b..7a34a8e 100644 ---- a/node_modules/@react-navigation/native-stack/src/types.tsx -+++ b/node_modules/@react-navigation/native-stack/src/types.tsx -@@ -490,6 +490,14 @@ export type NativeStackNavigationOptions = { - * Only supported on iOS and Android. - */ - freezeOnBlur?: boolean; -+ // partial changes from https://github.com/react-navigation/react-navigation/commit/90cfbf23bcc5259f3262691a9eec6c5b906e5262 -+ // patch can be removed when new version of `native-stack` will be released -+ /** -+ * Whether the keyboard should hide when swiping to the previous screen. Defaults to `false`. -+ * -+ * Only supported on iOS -+ */ -+ keyboardHandlingEnabled?: boolean; - }; - - export type NativeStackNavigatorProps = DefaultNavigatorOptions< -diff --git a/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx b/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx -index a005c43..03d8b50 100644 ---- a/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx -+++ b/node_modules/@react-navigation/native-stack/src/views/NativeStackView.native.tsx -@@ -161,6 +161,7 @@ const SceneView = ({ - statusBarTranslucent, - statusBarColor, - freezeOnBlur, -+ keyboardHandlingEnabled, - } = options; - - let { -@@ -289,6 +290,7 @@ const SceneView = ({ - onNativeDismissCancelled={onNativeDismissCancelled} - // this prop is available since rn-screens 3.16 - freezeOnBlur={freezeOnBlur} -+ hideKeyboardOnSwipe={keyboardHandlingEnabled} - > - - diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx index 2be262aa5f0f..ec033bf64218 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx @@ -1,8 +1,8 @@ import type {ParamListBase} from '@react-navigation/routers'; import type {StackNavigationOptions} from '@react-navigation/stack'; +import {CardStyleInterpolators, createStackNavigator} from '@react-navigation/stack'; import React, {useMemo} from 'react'; import useThemeStyles from '@hooks/useThemeStyles'; -import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type { AddPersonalBankAccountNavigatorParamList, DetailsNavigatorParamList, @@ -35,7 +35,6 @@ import type { import type {ThemeStyles} from '@styles/index'; import type {Screen} from '@src/SCREENS'; import SCREENS from '@src/SCREENS'; -import subRouteOptions from './modalStackNavigatorOptions'; type Screens = Partial React.ComponentType>>; @@ -46,15 +45,16 @@ type Screens = Partial React.ComponentType>>; * @param getScreenOptions optional function that returns the screen options, override the default options */ function createModalStackNavigator(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType { - const ModalStackNavigator = createPlatformStackNavigator(); + const ModalStackNavigator = createStackNavigator(); function ModalStack() { const styles = useThemeStyles(); const defaultSubRouteOptions = useMemo( (): StackNavigationOptions => ({ - ...subRouteOptions, cardStyle: styles.navigationScreenCardStyle, + headerShown: false, + cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, }), [styles], ); diff --git a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx index 262a93da9e33..1e5d3639a32f 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/CentralPaneNavigator/BaseCentralPaneNavigator.tsx @@ -1,12 +1,12 @@ +import {createStackNavigator} from '@react-navigation/stack'; import React from 'react'; import useThemeStyles from '@hooks/useThemeStyles'; import ReportScreenWrapper from '@libs/Navigation/AppNavigator/ReportScreenWrapper'; import getCurrentUrl from '@libs/Navigation/currentUrl'; -import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {CentralPaneNavigatorParamList} from '@navigation/types'; import SCREENS from '@src/SCREENS'; -const Stack = createPlatformStackNavigator(); +const Stack = createStackNavigator(); const url = getCurrentUrl(); const openOnAdminRoom = url ? new URL(url).searchParams.get('openOnAdminRoom') : undefined; diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx similarity index 100% rename from src/libs/Navigation/AppNavigator/Navigators/Overlay/index.tsx rename to src/libs/Navigation/AppNavigator/Navigators/Overlay.tsx diff --git a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx b/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx deleted file mode 100644 index 30651e32cbd6..000000000000 --- a/src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx +++ /dev/null @@ -1,7 +0,0 @@ -function Overlay() { - return null; -} - -Overlay.displayName = 'Overlay'; - -export default Overlay; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 550fb947a4e6..c421bdc82028 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -1,4 +1,5 @@ import type {StackScreenProps} from '@react-navigation/stack'; +import {createStackNavigator} from '@react-navigation/stack'; import React, {useMemo, useRef} from 'react'; import {View} from 'react-native'; import NoDropZone from '@components/DragAndDrop/NoDropZone'; @@ -6,7 +7,6 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions'; import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators'; -import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types'; import type NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; @@ -14,7 +14,7 @@ import Overlay from './Overlay'; type RightModalNavigatorProps = StackScreenProps; -const Stack = createPlatformStackNavigator(); +const Stack = createStackNavigator(); function RightModalNavigator({navigation}: RightModalNavigatorProps) { const styles = useThemeStyles(); diff --git a/src/libs/Navigation/AppNavigator/PublicScreens.tsx b/src/libs/Navigation/AppNavigator/PublicScreens.tsx index 792a538cfd39..6b1557994627 100644 --- a/src/libs/Navigation/AppNavigator/PublicScreens.tsx +++ b/src/libs/Navigation/AppNavigator/PublicScreens.tsx @@ -1,5 +1,5 @@ +import {createStackNavigator} from '@react-navigation/stack'; import React from 'react'; -import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator'; import type {PublicScreensParamList} from '@navigation/types'; import LogInWithShortLivedAuthTokenPage from '@pages/LogInWithShortLivedAuthTokenPage'; import AppleSignInDesktopPage from '@pages/signin/AppleSignInDesktopPage'; @@ -12,7 +12,7 @@ import NAVIGATORS from '@src/NAVIGATORS'; import SCREENS from '@src/SCREENS'; import defaultScreenOptions from './defaultScreenOptions'; -const RootStack = createPlatformStackNavigator(); +const RootStack = createStackNavigator(); function PublicScreens() { return ( diff --git a/src/libs/Navigation/AppNavigator/defaultScreenOptions/index.native.ts b/src/libs/Navigation/AppNavigator/defaultScreenOptions/index.native.ts deleted file mode 100644 index 17100bc71bda..000000000000 --- a/src/libs/Navigation/AppNavigator/defaultScreenOptions/index.native.ts +++ /dev/null @@ -1,11 +0,0 @@ -const defaultScreenOptions = { - contentStyle: { - overflow: 'visible', - flex: 1, - }, - headerShown: false, - animationTypeForReplace: 'push', - animation: 'slide_from_right', -}; - -export default defaultScreenOptions; diff --git a/src/libs/Navigation/AppNavigator/defaultScreenOptions/index.ts b/src/libs/Navigation/AppNavigator/defaultScreenOptions/index.ts deleted file mode 100644 index 4015c43c679e..000000000000 --- a/src/libs/Navigation/AppNavigator/defaultScreenOptions/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {StackNavigationOptions} from '@react-navigation/stack'; - -const defaultScreenOptions: StackNavigationOptions = { - cardStyle: { - overflow: 'visible', - flex: 1, - }, - headerShown: false, - animationTypeForReplace: 'push', -}; - -export default defaultScreenOptions; diff --git a/src/libs/Navigation/AppNavigator/getRightModalNavigatorOptions/index.native.ts b/src/libs/Navigation/AppNavigator/getRightModalNavigatorOptions/index.native.ts deleted file mode 100644 index 2b062fd2f2be..000000000000 --- a/src/libs/Navigation/AppNavigator/getRightModalNavigatorOptions/index.native.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type {NativeStackNavigationOptions} from '@react-navigation/native-stack'; - -const rightModalNavigatorOptions = (): NativeStackNavigationOptions => ({ - presentation: 'card', - animation: 'slide_from_right', -}); - -export default rightModalNavigatorOptions; diff --git a/src/libs/Navigation/AppNavigator/getRightModalNavigatorOptions/index.ts b/src/libs/Navigation/AppNavigator/getRightModalNavigatorOptions/index.ts deleted file mode 100644 index 935c0041b794..000000000000 --- a/src/libs/Navigation/AppNavigator/getRightModalNavigatorOptions/index.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type {StackNavigationOptions} from '@react-navigation/stack'; -// eslint-disable-next-line no-restricted-imports -import getNavigationModalCardStyle from '@styles/utils/getNavigationModalCardStyles'; - -const rightModalNavigatorOptions = (isSmallScreenWidth: boolean): StackNavigationOptions => ({ - presentation: 'transparentModal', - - // We want pop in RHP since there are some flows that would work weird otherwise - animationTypeForReplace: 'pop', - cardStyle: { - ...getNavigationModalCardStyle(), - - // This is necessary to cover translated sidebar with overlay. - width: isSmallScreenWidth ? '100%' : '200%', - // Excess space should be on the left so we need to position from right. - right: 0, - }, -}); - -export default rightModalNavigatorOptions; diff --git a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts index 5685afec5459..c3a69bbd7ccf 100644 --- a/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/getRootNavigatorScreenOptions.ts @@ -4,7 +4,6 @@ import type {StyleUtilsType} from '@styles/utils'; import variables from '@styles/variables'; import CONFIG from '@src/CONFIG'; import createModalCardStyleInterpolator from './createModalCardStyleInterpolator'; -import getRightModalNavigatorOptions from './getRightModalNavigatorOptions'; type ScreenOptions = Record; @@ -26,12 +25,23 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr return { rightModalNavigator: { ...commonScreenOptions, - ...getRightModalNavigatorOptions(isSmallScreenWidth), cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props), + presentation: 'transparentModal', + + // We want pop in RHP since there are some flows that would work weird otherwise + animationTypeForReplace: 'pop', + cardStyle: { + ...StyleUtils.getNavigationModalCardStyle(), + + // This is necessary to cover translated sidebar with overlay. + width: isSmallScreenWidth ? '100%' : '200%', + // Excess space should be on the left so we need to position from right. + right: 0, + }, }, leftModalNavigator: { ...commonScreenOptions, - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER), + cardStyleInterpolator: (props) => modalCardStyleInterpolator(isSmallScreenWidth, false, props, SLIDE_LEFT_OUTPUT_RANGE_MULTIPLIER), presentation: 'transparentModal', // We want pop in LHP since there are some flows that would work weird otherwise @@ -49,8 +59,8 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr homeScreen: { 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), + cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), width: isSmallScreenWidth ? '100%' : variables.sideBarWidth, @@ -63,7 +73,6 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr fullScreen: { ...commonScreenOptions, - cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, props), cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), @@ -78,9 +87,7 @@ const getRootNavigatorScreenOptions: GetRootNavigatorScreenOptions = (isSmallScr ...commonScreenOptions, animationEnabled: isSmallScreenWidth, cardStyleInterpolator: (props: StackCardInterpolationProps) => modalCardStyleInterpolator(isSmallScreenWidth, true, 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, + cardStyle: { ...StyleUtils.getNavigationModalCardStyle(), paddingRight: isSmallScreenWidth ? 0 : variables.sideBarWidth, diff --git a/src/libs/Navigation/AppNavigator/modalStackNavigatorOptions/index.native.ts b/src/libs/Navigation/AppNavigator/modalStackNavigatorOptions/index.native.ts deleted file mode 100644 index ca9769fa9972..000000000000 --- a/src/libs/Navigation/AppNavigator/modalStackNavigatorOptions/index.native.ts +++ /dev/null @@ -1,8 +0,0 @@ -import type {NativeStackNavigationOptions} from '@react-navigation/native-stack'; - -const defaultSubRouteOptions: NativeStackNavigationOptions = { - headerShown: false, - animation: 'slide_from_right', -}; - -export default defaultSubRouteOptions; diff --git a/src/libs/Navigation/AppNavigator/modalStackNavigatorOptions/index.ts b/src/libs/Navigation/AppNavigator/modalStackNavigatorOptions/index.ts deleted file mode 100644 index 280a38b263b7..000000000000 --- a/src/libs/Navigation/AppNavigator/modalStackNavigatorOptions/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import type {StackNavigationOptions} from '@react-navigation/stack'; -import {CardStyleInterpolators} from '@react-navigation/stack'; - -const defaultSubRouteOptions: StackNavigationOptions = { - headerShown: false, - cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, -}; - -export default defaultSubRouteOptions; diff --git a/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator.native.ts b/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator.native.ts deleted file mode 100644 index ef44cefc13c9..000000000000 --- a/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator.native.ts +++ /dev/null @@ -1,7 +0,0 @@ -import {createNativeStackNavigator} from '@react-navigation/native-stack'; - -function createPlatformStackNavigator() { - return createNativeStackNavigator(); -} - -export default createPlatformStackNavigator; diff --git a/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator.ts b/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator.ts deleted file mode 100644 index 51228295572f..000000000000 --- a/src/libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator.ts +++ /dev/null @@ -1,5 +0,0 @@ -import {createStackNavigator} from '@react-navigation/stack'; - -const createPlatformStackNavigator: typeof createStackNavigator = () => createStackNavigator(); - -export default createPlatformStackNavigator;