diff --git a/app/components/Nav/App/App.tsx b/app/components/Nav/App/App.tsx index a3010a6719b..a6e983439b8 100644 --- a/app/components/Nav/App/App.tsx +++ b/app/components/Nav/App/App.tsx @@ -1,6 +1,9 @@ import React, { useContext, useEffect, useMemo, useRef } from 'react'; import { useRoute } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import { + createStackNavigator, + type StackNavigationOptions, +} from '@react-navigation/stack'; import Login from '../../Views/Login'; import OAuthRehydration from '../../Views/OAuthRehydration'; import QRTabSwitcher from '../../Views/QRTabSwitcher'; @@ -166,6 +169,31 @@ import { AccessRestrictedProvider } from '../../UI/Compliance'; const Stack = createStackNavigator(); +const accountSelectorTransitionOptions: StackNavigationOptions = { + animationEnabled: true, + cardStyle: { backgroundColor: importedColors.transparent }, + cardStyleInterpolator: ({ current, layouts }) => ({ + cardStyle: { + transform: [ + { + translateX: current.progress.interpolate({ + inputRange: [0, 1], + outputRange: [layouts.screen.width, 0], + }), + }, + ], + }, + }), + detachPreviousScreen: false, +}; + +const isAccountSelectorRootModalRoute = (params: object | undefined) => + Boolean( + params && + 'screen' in params && + params.screen === Routes.SHEET.ACCOUNT_SELECTOR, + ); + // Type helper for screen components that use v5 pattern of requiring route props // In React Navigation v6, screen components should ideally use useRoute() hook, // but for migration compatibility, we cast these components to satisfy the type checker. @@ -464,15 +492,7 @@ const RootModalFlow = (props: RootModalFlowProps) => ( ({ - overlayStyle: { - opacity: 0, - }, - }), - detachPreviousScreen: false, - }} + options={accountSelectorTransitionOptions} /> { + isAccountSelectorRootModalRoute(route.params) + ? accountSelectorTransitionOptions + : {} + } />