From 0f247475870226a13a814c22abb16c6fa3367116 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Thu, 4 Jul 2024 17:01:21 +0200 Subject: [PATCH 1/5] fix RHP animation on Safari --- .../AppNavigator/Navigators/RightModalNavigator.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 05c23797fe0e..0488ef34fd53 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -1,12 +1,14 @@ -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 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'; @@ -18,10 +20,15 @@ const Stack = createStackNavigator(); function RightModalNavigator({navigation}: RightModalNavigatorProps) { const styles = useThemeStyles(); + const styleUtils = useStyleUtils(); const {isSmallScreenWidth} = useWindowDimensions(); const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]); const isExecutingRef = useRef(false); + // The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator + const customInterpolator = createModalCardStyleInterpolator(styleUtils); + screenOptions.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props); + return ( {!isSmallScreenWidth && ( From 60835a06dcaf6c950f4562b0dc1312bea2d75730 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Fri, 5 Jul 2024 13:01:05 +0200 Subject: [PATCH 2/5] use custom interpolator also for Modal Stack navigators --- .../ModalStackNavigators/useModalScreenOptions.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts index 3c5ef1833835..7ce3c9d959f0 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts @@ -1,19 +1,25 @@ -import type {StackNavigationOptions} from '@react-navigation/stack'; -import {CardStyleInterpolators} from '@react-navigation/stack'; +import type {StackCardInterpolationProps, StackNavigationOptions} from '@react-navigation/stack'; import {useMemo} from 'react'; +import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; +import useWindowDimensions from '@hooks/useWindowDimensions'; +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(); + + const customInterpolator = createModalCardStyleInterpolator(styleUtils); const defaultSubRouteOptions = useMemo( (): StackNavigationOptions => ({ cardStyle: styles.navigationScreenCardStyle, headerShown: false, - cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS, + cardStyleInterpolator: (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props), }), - [styles], + [styles, customInterpolator, isSmallScreenWidth], ); return getScreenOptions?.(styles) ?? defaultSubRouteOptions; From eb92f58fb08cf904f1cfd2f23600fbbcc8bcc9c8 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Fri, 5 Jul 2024 13:51:58 +0200 Subject: [PATCH 3/5] use custom interpolators only for Safari --- .../ModalStackNavigators/useModalScreenOptions.ts | 13 ++++++++++--- .../AppNavigator/Navigators/RightModalNavigator.tsx | 7 +++++-- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts index 7ce3c9d959f0..460b0c732797 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators/useModalScreenOptions.ts @@ -1,8 +1,10 @@ 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'; import createModalCardStyleInterpolator from '@navigation/AppNavigator/createModalCardStyleInterpolator'; import type {ThemeStyles} from '@src/styles'; @@ -11,15 +13,20 @@ function useModalScreenOptions(getScreenOptions?: (styles: ThemeStyles) => Stack const styleUtils = useStyleUtils(); const {isSmallScreenWidth} = useWindowDimensions(); - const customInterpolator = createModalCardStyleInterpolator(styleUtils); + 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: (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props), + cardStyleInterpolator, }), - [styles, customInterpolator, isSmallScreenWidth], + [styles, cardStyleInterpolator], ); return getScreenOptions?.(styles) ?? defaultSubRouteOptions; diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 0488ef34fd53..d987756c8069 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -6,6 +6,7 @@ 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'; @@ -26,8 +27,10 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) { const isExecutingRef = useRef(false); // The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator - const customInterpolator = createModalCardStyleInterpolator(styleUtils); - screenOptions.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props); + if (isSafari()) { + const customInterpolator = createModalCardStyleInterpolator(styleUtils); + screenOptions.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props); + } return ( From 151c8a9d964bad8d8eeda65b981d9d3ca9043d88 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Fri, 5 Jul 2024 16:01:14 +0200 Subject: [PATCH 4/5] fix custom interpolator for Safari after review --- .../Navigators/RightModalNavigator.tsx | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index d987756c8069..0f8c88fdac27 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -23,14 +23,17 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) { const styles = useThemeStyles(); const styleUtils = useStyleUtils(); const {isSmallScreenWidth} = useWindowDimensions(); - const screenOptions = useMemo(() => ModalNavigatorScreenOptions(styles), [styles]); const isExecutingRef = useRef(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); + screenOptions.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props); + } - // The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator - if (isSafari()) { - const customInterpolator = createModalCardStyleInterpolator(styleUtils); - screenOptions.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props); - } + return options; + }, [isSmallScreenWidth, styleUtils, styles]); return ( From cabac7ee4d793121d32b769291f81b09593ba0c8 Mon Sep 17 00:00:00 2001 From: Mateusz Titz Date: Fri, 5 Jul 2024 16:50:16 +0200 Subject: [PATCH 5/5] fix custom interpolator for Safari after review --- .../Navigation/AppNavigator/Navigators/RightModalNavigator.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx index 0f8c88fdac27..6b83c1997693 100644 --- a/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx +++ b/src/libs/Navigation/AppNavigator/Navigators/RightModalNavigator.tsx @@ -29,7 +29,7 @@ function RightModalNavigator({navigation}: RightModalNavigatorProps) { // The .forHorizontalIOS interpolator from `@react-navigation` is misbehaving on Safari, so we override it with Expensify custom interpolator if (isSafari()) { const customInterpolator = createModalCardStyleInterpolator(styleUtils); - screenOptions.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props); + options.cardStyleInterpolator = (props: StackCardInterpolationProps) => customInterpolator(isSmallScreenWidth, false, false, props); } return options;