Skip to content

Commit 3b921d3

Browse files
chrispaderchrispader
committed
git revert old changes
1 parent cb2687a commit 3b921d3

32 files changed

+244
-979
lines changed

‎src/libs/Navigation/AppNavigator/AuthScreens.tsx

+5-7
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ import {isEmptyObject} from '@src/types/utils/EmptyObject';
5353
import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
5454
import beforeRemoveReportOpenedFromSearchRHP from './beforeRemoveReportOpenedFromSearchRHP';
5555
import CENTRAL_PANE_SCREENS from './CENTRAL_PANE_SCREENS';
56-
import createCustomStackNavigator from './createCustomStackNavigator';
56+
import createResponsiveStackNavigator from './createResponsiveStackNavigator';
5757
import defaultScreenOptions from './defaultScreenOptions';
5858
import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
5959
import BottomTabNavigator from './Navigators/BottomTabNavigator';
@@ -195,7 +195,7 @@ function handleNetworkReconnect() {
195195
}
196196
}
197197

198-
const RootStack = createCustomStackNavigator<AuthScreensParamList>();
198+
const RootStack = createResponsiveStackNavigator<AuthScreensParamList>();
199199
// We want to delay the re-rendering for components(e.g. ReportActionCompose)
200200
// that depends on modal visibility until Modal is completely closed and its focused
201201
// When modal screen is focused, update modal visibility in Onyx
@@ -226,7 +226,7 @@ const modalScreenListenersWithCancelSearch = {
226226
function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDAppliedToClient}: AuthScreensProps) {
227227
const styles = useThemeStyles();
228228
const StyleUtils = useStyleUtils();
229-
const {shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth, isSmallScreenWidth} = useResponsiveLayout();
229+
const {shouldUseNarrowLayout, onboardingIsMediumOrLargerScreenWidth} = useResponsiveLayout();
230230
const screenOptions = getRootNavigatorScreenOptions(shouldUseNarrowLayout, styles, StyleUtils);
231231
const {canUseDefaultRooms} = usePermissions();
232232
const {activeWorkspaceID} = useActiveWorkspace();
@@ -409,10 +409,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
409409
return (
410410
<ComposeProviders components={[OptionsListContextProvider, SearchContextProvider]}>
411411
<View style={styles.rootNavigatorContainerStyles(shouldUseNarrowLayout)}>
412-
<RootStack.Navigator
413-
screenOptions={screenOptions.centralPaneNavigator}
414-
isSmallScreenWidth={isSmallScreenWidth}
415-
>
412+
<RootStack.Navigator screenOptions={screenOptions.centralPaneNavigator}>
416413
<RootStack.Screen
417414
name={NAVIGATORS.BOTTOM_TAB_NAVIGATOR}
418415
options={screenOptions.bottomTab}
@@ -461,6 +458,7 @@ function AuthScreens({session, lastOpenedPublicRoomID, initialLastUpdateIDApplie
461458
options={{
462459
headerShown: false,
463460
presentation: 'transparentModal',
461+
animation: 'none',
464462
}}
465463
getComponent={loadProfileAvatar}
466464
listeners={modalScreenListeners}

‎src/libs/Navigation/AppNavigator/ModalNavigatorScreenOptions.ts

+21-8
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,32 @@
1-
import type {StackNavigationOptions} from '@react-navigation/stack';
21
import {CardStyleInterpolators} from '@react-navigation/stack';
32
import type {GestureDirection} from '@react-navigation/stack/lib/typescript/src/types';
3+
import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
44
import type {ThemeStyles} from '@styles/index';
55

66
/**
77
* Modal stack navigator screen options generator function
88
* @param themeStyles - The styles object
99
* @returns The screen options object
1010
*/
11-
const ModalNavigatorScreenOptions = (themeStyles: ThemeStyles, gestureDirection: GestureDirection = 'horizontal'): StackNavigationOptions => ({
12-
headerShown: false,
13-
animationEnabled: true,
14-
gestureDirection,
15-
cardStyle: themeStyles.navigationScreenCardStyle,
16-
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
17-
});
11+
const ModalNavigatorScreenOptions = (themeStyles: ThemeStyles, gestureDirection: GestureDirection = 'horizontal'): PlatformStackNavigationOptions => {
12+
let universalGestureDirection: PlatformStackNavigationOptions['gestureDirection'] | undefined;
13+
let webGestureDirection: GestureDirection | undefined;
14+
if (gestureDirection === 'horizontal' || gestureDirection === 'vertical') {
15+
universalGestureDirection = gestureDirection;
16+
} else {
17+
webGestureDirection = gestureDirection;
18+
}
19+
20+
return {
21+
headerShown: false,
22+
animation: 'slide_from_right',
23+
gestureDirection: universalGestureDirection,
24+
web: {
25+
cardStyle: themeStyles.navigationScreenCardStyle,
26+
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
27+
gestureDirection: webGestureDirection,
28+
},
29+
};
30+
};
1831

1932
export default ModalNavigatorScreenOptions;

‎src/libs/Navigation/AppNavigator/ModalStackNavigators/index.tsx

+4-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type {ParamListBase} from '@react-navigation/routers';
2-
import type {StackNavigationOptions} from '@react-navigation/stack';
3-
import {createStackNavigator} from '@react-navigation/stack';
42
import React from 'react';
3+
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
54
import type {
65
AddPersonalBankAccountNavigatorParamList,
76
DebugParamList,
@@ -33,10 +32,10 @@ import type {
3332
TravelNavigatorParamList,
3433
WalletStatementNavigatorParamList,
3534
} from '@navigation/types';
36-
import type {ThemeStyles} from '@styles/index';
3735
import type {Screen} from '@src/SCREENS';
3836
import SCREENS from '@src/SCREENS';
3937
import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
38+
import type {GetModalStackScreenOptions} from './useModalScreenOptions';
4039
import useModalScreenOptions from './useModalScreenOptions';
4140

4241
type Screens = Partial<Record<Screen, () => React.ComponentType>>;
@@ -47,8 +46,8 @@ type Screens = Partial<Record<Screen, () => React.ComponentType>>;
4746
* @param screens key/value pairs where the key is the name of the screen and the value is a functon that returns the lazy-loaded component
4847
* @param getScreenOptions optional function that returns the screen options, override the default options
4948
*/
50-
function createModalStackNavigator<TStackParams extends ParamListBase>(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType {
51-
const ModalStackNavigator = createStackNavigator<TStackParams>();
49+
function createModalStackNavigator<ParamList extends ParamListBase>(screens: Screens, getScreenOptions?: GetModalStackScreenOptions): React.ComponentType {
50+
const ModalStackNavigator = createPlatformStackNavigator<ParamList>();
5251

5352
function ModalStack() {
5453
const screenOptions = useModalScreenOptions(getScreenOptions);

‎src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts

+14-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,18 @@
1-
import type {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack';
1+
import type {StackCardInterpolationProps} from '@react-navigation/stack';
22
import {CardStyleInterpolators} from '@react-navigation/stack';
33
import {useMemo} from 'react';
44
import useResponsiveLayout from '@hooks/useResponsiveLayout';
55
import useStyleUtils from '@hooks/useStyleUtils';
66
import useThemeStyles from '@hooks/useThemeStyles';
77
import {isSafari} from '@libs/Browser';
8+
import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe';
9+
import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
810
import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator';
911
import type {ThemeStyles} from '@src/styles';
1012

11-
function useModalScreenOptions(getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions) {
13+
type GetModalStackScreenOptions = (styles: ThemeStyles) => PlatformStackNavigationOptions;
14+
15+
function useModalScreenOptions(getScreenOptions?: GetModalStackScreenOptions) {
1216
const styles = useThemeStyles();
1317
const styleUtils = useStyleUtils();
1418
const {shouldUseNarrowLayout} = useResponsiveLayout();
@@ -21,15 +25,19 @@ function useModalScreenOptions(getScreenOptions?: (styles: ThemeStyles) => Stack
2125
}
2226

2327
const defaultSubRouteOptions = useMemo(
24-
(): StackNavigationOptions => ({
25-
cardStyle: styles.navigationScreenCardStyle,
28+
(): PlatformStackNavigationOptions => ({
29+
...hideKeyboardOnSwipe,
2630
headerShown: false,
27-
cardStyleInterpolator,
31+
web: {
32+
cardStyle: styles.navigationScreenCardStyle,
33+
cardStyleInterpolator,
34+
},
2835
}),
29-
[styles, cardStyleInterpolator],
36+
[cardStyleInterpolator, styles.navigationScreenCardStyle],
3037
);
3138

3239
return getScreenOptions?.(styles) ?? defaultSubRouteOptions;
3340
}
3441

3542
export default useModalScreenOptions;
43+
export type {GetModalStackScreenOptions};

‎src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx

+2-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {useNavigationState} from '@react-navigation/native';
2-
import type {StackNavigationOptions} from '@react-navigation/stack';
32
import React from 'react';
43
import createCustomBottomTabNavigator from '@libs/Navigation/AppNavigator/createCustomBottomTabNavigator';
54
import getTopmostCentralPaneRoute from '@libs/Navigation/getTopmostCentralPaneRoute';
5+
import type {PlatformStackNavigationOptions} from '@libs/Navigation/PlatformStackNavigation/types';
66
import type {BottomTabNavigatorParamList, CentralPaneName, NavigationPartialRoute, RootStackParamList} from '@libs/Navigation/types';
77
import SidebarScreen from '@pages/home/sidebar/SidebarScreen';
88
import SearchPageBottomTab from '@pages/Search/SearchPageBottomTab';
@@ -13,9 +13,8 @@ import ActiveCentralPaneRouteContext from './ActiveCentralPaneRouteContext';
1313
const loadInitialSettingsPage = () => require<ReactComponentModule>('../../../../pages/settings/InitialSettingsPage').default;
1414
const Tab = createCustomBottomTabNavigator<BottomTabNavigatorParamList>();
1515

16-
const screenOptions: StackNavigationOptions = {
16+
const screenOptions: PlatformStackNavigationOptions = {
1717
headerShown: false,
18-
animationEnabled: false,
1918
};
2019

2120
function BottomTabNavigator() {

‎src/libs/Navigation/AppNavigator/Navigators/ExplanationModalNavigator.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import {createStackNavigator} from '@react-navigation/stack';
21
import React from 'react';
32
import {View} from 'react-native';
43
import NoDropZone from '@components/DragAndDrop/NoDropZone';
54
import ExplanationModal from '@components/ExplanationModal';
5+
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
66
import type {ExplanationModalNavigatorParamList} from '@libs/Navigation/types';
77
import SCREENS from '@src/SCREENS';
88

9-
const Stack = createStackNavigator<ExplanationModalNavigatorParamList>();
9+
const Stack = createPlatformStackNavigator<ExplanationModalNavigatorParamList>();
1010

1111
function ExplanationModalNavigator() {
1212
return (
1313
<NoDropZone>
1414
<View>
15-
<Stack.Navigator screenOptions={{headerShown: false, animationEnabled: true}}>
15+
<Stack.Navigator screenOptions={{headerShown: false, animation: 'slide_from_right'}}>
1616
<Stack.Screen
1717
name={SCREENS.EXPLANATION_MODAL.ROOT}
1818
component={ExplanationModal}

‎src/libs/Navigation/AppNavigator/Navigators/FeatureTrainingModalNavigator.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import {createStackNavigator} from '@react-navigation/stack';
21
import React from 'react';
32
import {View} from 'react-native';
43
import NoDropZone from '@components/DragAndDrop/NoDropZone';
4+
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
55
import type {FeatureTrainingNavigatorParamList} from '@libs/Navigation/types';
66
import TrackTrainingPage from '@pages/TrackTrainingPage';
77
import SCREENS from '@src/SCREENS';
88

9-
const Stack = createStackNavigator<FeatureTrainingNavigatorParamList>();
9+
const Stack = createPlatformStackNavigator<FeatureTrainingNavigatorParamList>();
1010

1111
function FeatureTrainingModalNavigator() {
1212
return (
1313
<NoDropZone>
1414
<View>
15-
<Stack.Navigator screenOptions={{headerShown: false, animationEnabled: true}}>
15+
<Stack.Navigator screenOptions={{headerShown: false, animation: 'slide_from_right'}}>
1616
<Stack.Screen
1717
name={SCREENS.FEATURE_TRAINING_ROOT}
1818
component={TrackTrainingPage}

‎src/libs/Navigation/AppNavigator/Navigators/LeftModalNavigator.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
1-
import type {StackScreenProps} from '@react-navigation/stack';
2-
import {createStackNavigator} from '@react-navigation/stack';
31
import React, {useMemo} from 'react';
42
import {View} from 'react-native';
53
import NoDropZone from '@components/DragAndDrop/NoDropZone';
64
import useResponsiveLayout from '@hooks/useResponsiveLayout';
75
import useThemeStyles from '@hooks/useThemeStyles';
86
import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
7+
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
8+
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
99
import type {AuthScreensParamList, LeftModalNavigatorParamList} from '@libs/Navigation/types';
1010
import NAVIGATORS from '@src/NAVIGATORS';
1111
import SCREENS from '@src/SCREENS';
1212
import type ReactComponentModule from '@src/types/utils/ReactComponentModule';
1313
import Overlay from './Overlay';
1414

15-
type LeftModalNavigatorProps = StackScreenProps<AuthScreensParamList, typeof NAVIGATORS.LEFT_MODAL_NAVIGATOR>;
15+
type LeftModalNavigatorProps = PlatformStackScreenProps<AuthScreensParamList, typeof NAVIGATORS.LEFT_MODAL_NAVIGATOR>;
1616

1717
const loadChatFinder = () => require<ReactComponentModule>('../../../../pages/ChatFinderPage').default;
1818
const loadWorkspaceSwitcherPage = () => require<ReactComponentModule>('../../../../pages/WorkspaceSwitcherPage').default;
1919

20-
const Stack = createStackNavigator<LeftModalNavigatorParamList>();
20+
const Stack = createPlatformStackNavigator<LeftModalNavigatorParamList>();
2121

2222
function LeftModalNavigator({navigation}: LeftModalNavigatorProps) {
2323
const styles = useThemeStyles();

‎src/libs/Navigation/AppNavigator/Navigators/OnboardingModalNavigator.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {createStackNavigator} from '@react-navigation/stack';
21
import React, {useCallback, useEffect} from 'react';
32
import {View} from 'react-native';
43
import {useOnyx} from 'react-native-onyx';
@@ -10,6 +9,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
109
import hasCompletedGuidedSetupFlowSelector from '@libs/hasCompletedGuidedSetupFlowSelector';
1110
import OnboardingModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/OnboardingModalNavigatorScreenOptions';
1211
import Navigation from '@libs/Navigation/Navigation';
12+
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
1313
import type {OnboardingModalNavigatorParamList} from '@libs/Navigation/types';
1414
import OnboardingRefManager from '@libs/OnboardingRefManager';
1515
import OnboardingPersonalDetails from '@pages/OnboardingPersonalDetails';
@@ -22,7 +22,7 @@ import ROUTES from '@src/ROUTES';
2222
import SCREENS from '@src/SCREENS';
2323
import Overlay from './Overlay';
2424

25-
const Stack = createStackNavigator<OnboardingModalNavigatorParamList>();
25+
const Stack = createPlatformStackNavigator<OnboardingModalNavigatorParamList>();
2626

2727
function OnboardingModalNavigator() {
2828
const styles = useThemeStyles();

‎src/libs/Navigation/AppNavigator/Navigators/Overlay/index.native.tsx

+2-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,5 @@
1-
import React from 'react';
2-
import type {BaseOverlayProps} from './BaseOverlay';
3-
import BaseOverlay from './BaseOverlay';
4-
5-
function Overlay({...rest}: Omit<BaseOverlayProps, 'shouldUseNativeStyles'>) {
6-
return (
7-
<BaseOverlay
8-
shouldUseNativeStyles
9-
// eslint-disable-next-line react/jsx-props-no-spreading
10-
{...rest}
11-
/>
12-
);
1+
function Overlay() {
2+
return null;
133
}
144

155
Overlay.displayName = 'Overlay';

‎src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx

+10-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import type {StackCardInterpolationProps, StackScreenProps} from '@react-navigation/stack';
2-
import {createStackNavigator} from '@react-navigation/stack';
1+
import type {StackCardInterpolationProps} from '@react-navigation/stack';
32
import React, {useMemo, useRef} from 'react';
43
import {InteractionManager, View} from 'react-native';
54
import NoDropZone from '@components/DragAndDrop/NoDropZone';
@@ -8,17 +7,20 @@ import useStyleUtils from '@hooks/useStyleUtils';
87
import useThemeStyles from '@hooks/useThemeStyles';
98
import {abandonReviewDuplicateTransactions} from '@libs/actions/Transaction';
109
import {isSafari} from '@libs/Browser';
10+
import hideKeyboardOnSwipe from '@libs/Navigation/AppNavigator/hideKeyboardOnSwipe';
1111
import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
1212
import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
13+
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
14+
import type {PlatformStackScreenProps} from '@libs/Navigation/PlatformStackNavigation/types';
1315
import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator';
1416
import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
1517
import NAVIGATORS from '@src/NAVIGATORS';
1618
import SCREENS from '@src/SCREENS';
1719
import Overlay from './Overlay';
1820

19-
type RightModalNavigatorProps = StackScreenProps<AuthScreensParamList, typeof NAVIGATORS.RIGHT_MODAL_NAVIGATOR>;
21+
type RightModalNavigatorProps = PlatformStackScreenProps<AuthScreensParamList, typeof NAVIGATORS.RIGHT_MODAL_NAVIGATOR>;
2022

21-
const Stack = createStackNavigator<RightModalNavigatorParamList>();
23+
const Stack = createPlatformStackNavigator<RightModalNavigatorParamList>();
2224

2325
function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
2426
const styles = useThemeStyles();
@@ -30,7 +32,9 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
3032
// The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator
3133
if (isSafari()) {
3234
const customInterpolator = createModalCardStyleInterpolator(styleUtils);
33-
options.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(shouldUseNarrowLayout, false, false, props);
35+
if (options.web) {
36+
options.web.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(shouldUseNarrowLayout, false, false, props);
37+
}
3438
}
3539

3640
return options;
@@ -162,6 +166,7 @@ function RightModalNavigator({navigation, route}: RightModalNavigatorProps) {
162166
<Stack.Screen
163167
name={SCREENS.RIGHT_MODAL.PRIVATE_NOTES}
164168
component={ModalStackNavigators.PrivateNotesModalStackNavigator}
169+
options={hideKeyboardOnSwipe}
165170
/>
166171
<Stack.Screen
167172
name="ProcessMoneyRequestHold"

‎src/libs/Navigation/AppNavigator/Navigators/WelcomeVideoModalNavigator.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import {createStackNavigator} from '@react-navigation/stack';
21
import React from 'react';
32
import {View} from 'react-native';
43
import NoDropZone from '@components/DragAndDrop/NoDropZone';
54
import OnboardingWelcomeVideo from '@components/OnboardingWelcomeVideo';
5+
import createPlatformStackNavigator from '@libs/Navigation/PlatformStackNavigation/createPlatformStackNavigator';
66
import type {WelcomeVideoModalNavigatorParamList} from '@libs/Navigation/types';
77
import SCREENS from '@src/SCREENS';
88

9-
const Stack = createStackNavigator<WelcomeVideoModalNavigatorParamList>();
9+
const Stack = createPlatformStackNavigator<WelcomeVideoModalNavigatorParamList>();
1010

1111
function WelcomeVideoModalNavigator() {
1212
return (
1313
<NoDropZone>
1414
<View>
15-
<Stack.Navigator screenOptions={{headerShown: false, animationEnabled: true}}>
15+
<Stack.Navigator screenOptions={{headerShown: false}}>
1616
<Stack.Screen
1717
name={SCREENS.WELCOME_VIDEO.ROOT}
1818
component={OnboardingWelcomeVideo}

0 commit comments

Comments
 (0)