diff --git a/native/navigation/options.js b/native/navigation/options.js --- a/native/navigation/options.js +++ b/native/navigation/options.js @@ -1,6 +1,12 @@ // @flow -import type { StackOptions } from '@react-navigation/core'; +import type { + StackOptions, + StackCardInterpolationProps, + TransitionPreset, + StackCardInterpolatedStyle, +} from '@react-navigation/core'; +import { TransitionPresets } from '@react-navigation/stack'; import { Platform } from 'react-native'; const defaultStackScreenOptions: StackOptions = { @@ -11,4 +17,30 @@ Platform.OS !== 'macos', }; -export { defaultStackScreenOptions }; +const baseTransitionPreset: TransitionPreset = Platform.select({ + ios: TransitionPresets.ModalSlideFromBottomIOS, + default: TransitionPresets.FadeFromBottomAndroid, +}); +const transitionPreset = { + ...baseTransitionPreset, + cardStyleInterpolator: ( + interpolatorProps: StackCardInterpolationProps, + ): StackCardInterpolatedStyle => { + const baseCardStyleInterpolator = + baseTransitionPreset.cardStyleInterpolator(interpolatorProps); + const overlayOpacity = interpolatorProps.current.progress.interpolate({ + inputRange: [0, 1], + outputRange: ([0, 0.7]: number[]), // Flow... + extrapolate: 'clamp', + }); + return { + ...baseCardStyleInterpolator, + overlayStyle: [ + baseCardStyleInterpolator.overlayStyle, + { opacity: overlayOpacity }, + ], + }; + }, +}; + +export { defaultStackScreenOptions, transitionPreset }; diff --git a/native/navigation/root-navigator.react.js b/native/navigation/root-navigator.react.js --- a/native/navigation/root-navigator.react.js +++ b/native/navigation/root-navigator.react.js @@ -11,21 +11,19 @@ StackNavigationProp, StackRouterOptions, RouteProp, - StackCardInterpolationProps, - TransitionPreset, } from '@react-navigation/core'; import { createNavigatorFactory, useNavigationBuilder, } from '@react-navigation/native'; -import { StackView, TransitionPresets } from '@react-navigation/stack'; +import { StackView } from '@react-navigation/stack'; import * as React from 'react'; import { Platform } from 'react-native'; import { enableScreens } from 'react-native-screens'; import AppNavigator from './app-navigator.react.js'; import InviteLinkModal from './invite-link-modal.react.js'; -import { defaultStackScreenOptions } from './options.js'; +import { defaultStackScreenOptions, transitionPreset } from './options.js'; import { RootNavigatorContext } from './root-navigator-context.js'; import RootRouter, { type RootRouterExtraNavigationHelpers, @@ -152,30 +150,6 @@ ExtraStackNavigatorProps, >(RootNavigator); -const baseTransitionPreset: TransitionPreset = Platform.select({ - ios: TransitionPresets.ModalSlideFromBottomIOS, - default: TransitionPresets.FadeFromBottomAndroid, -}); -const transitionPreset = { - ...baseTransitionPreset, - cardStyleInterpolator: (interpolatorProps: StackCardInterpolationProps) => { - const baseCardStyleInterpolator = - baseTransitionPreset.cardStyleInterpolator(interpolatorProps); - const overlayOpacity = interpolatorProps.current.progress.interpolate({ - inputRange: [0, 1], - outputRange: ([0, 0.7]: number[]), // Flow... - extrapolate: 'clamp', - }); - return { - ...baseCardStyleInterpolator, - overlayStyle: [ - baseCardStyleInterpolator.overlayStyle, - { opacity: overlayOpacity }, - ], - }; - }, -}; - const defaultScreenOptions = { ...defaultStackScreenOptions, ...transitionPreset,