Skip to content

fix RHP animation on Safari #44840

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mountiny merged 5 commits into from
Jul 5, 2024
Merged

fix RHP animation on Safari #44840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
0f24747
fix RHP animation on Safari
Kicu Jul 4, 2024
60835a0
use custom interpolator also for Modal Stack navigators
Kicu Jul 5, 2024
eb92f58
use custom interpolators only for Safari
Kicu Jul 5, 2024
151c8a9
fix custom interpolator for Safari after review
Kicu Jul 5, 2024
cabac7e
fix custom interpolator for Safari after review
Kicu Jul 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 16 additions & 3 deletions src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,32 @@
import type {StackNavigationOptions} from '@react-navigation/stack';
import type {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack';
import {CardStyleInterpolators} from '@react-navigation/stack';
import {useMemo} from 'react';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import {isSafari} from '@libs/Browser';

@ishpaul777 ishpaul777 Jul 5, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NAB, we usually import libs like this

import * as Browser from '@libs/Browser';

@Kicu Kicu Jul 5, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sorry forgot to change this, lets just keep as is - this code is supposed to go away soon when we have a better solution. Will keep this in mind for future

import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator';
import type {ThemeStyles} from '@src/styles';

function useModalScreenOptions(getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions) {
const styles = useThemeStyles();
const styleUtils = useStyleUtils();
const {isSmallScreenWidth} = useWindowDimensions();

let cardStyleInterpolator = CardStyleInterpolators.forHorizontalIOS;

if (isSafari()) {
const customInterpolator = createModalCardStyleInterpolator(styleUtils);
cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props);
}

const defaultSubRouteOptions = useMemo(
(): StackNavigationOptions => ({
cardStyle: styles.navigationScreenCardStyle,
headerShown: false,
cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
cardStyleInterpolator,
}),
[styles],
[styles, cardStyleInterpolator],
);

return getScreenOptions?.(styles) ?? defaultSubRouteOptions;
Expand Down
17 changes: 15 additions & 2 deletions src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,15 @@
import type {StackScreenProps} from '@react-navigation/stack';
import type {StackCardInterpolationProps, 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';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import {isSafari} from '@libs/Browser';
import ModalNavigatorScreenOptions from '@libs/Navigation/AppNavigator/ModalNavigatorScreenOptions';
import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator';
import type {AuthScreensParamList, RightModalNavigatorParamList} from '@navigation/types';
import NAVIGATORS from '@src/NAVIGATORS';
import SCREENS from '@src/SCREENS';
Expand All @@ -18,9 +21,19 @@ const Stack = createStackNavigator<RightModalNavigatorParamList>();

function RightModalNavigator({navigation}: RightModalNavigatorProps) {
const styles = useThemeStyles();
const styleUtils = useStyleUtils();
const {isSmallScreenWidth} = useWindowDimensions();
const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]);
const isExecutingRef = useRef<boolean>(false);
const screenOptions = useMemo(() => {
const options = ModalNavigatorScreenOptions(styles);
// The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator
if (isSafari()) {
const customInterpolator = createModalCardStyleInterpolator(styleUtils);
options.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props);
}

return options;
}, [isSmallScreenWidth, styleUtils, styles]);

return (
<NoDropZone>
Expand Down