|
1 | 1 | import React, { useContext, useEffect, useMemo, useRef } from 'react'; |
2 | 2 | import { useRoute } from '@react-navigation/native'; |
3 | | -import { createStackNavigator } from '@react-navigation/stack'; |
| 3 | +import { |
| 4 | + createStackNavigator, |
| 5 | + type StackNavigationOptions, |
| 6 | +} from '@react-navigation/stack'; |
4 | 7 | import Login from '../../Views/Login'; |
5 | 8 | import OAuthRehydration from '../../Views/OAuthRehydration'; |
6 | 9 | import QRTabSwitcher from '../../Views/QRTabSwitcher'; |
@@ -166,6 +169,31 @@ import { AccessRestrictedProvider } from '../../UI/Compliance'; |
166 | 169 |
|
167 | 170 | const Stack = createStackNavigator(); |
168 | 171 |
|
| 172 | +const accountSelectorTransitionOptions: StackNavigationOptions = { |
| 173 | + animationEnabled: true, |
| 174 | + cardStyle: { backgroundColor: importedColors.transparent }, |
| 175 | + cardStyleInterpolator: ({ current, layouts }) => ({ |
| 176 | + cardStyle: { |
| 177 | + transform: [ |
| 178 | + { |
| 179 | + translateX: current.progress.interpolate({ |
| 180 | + inputRange: [0, 1], |
| 181 | + outputRange: [layouts.screen.width, 0], |
| 182 | + }), |
| 183 | + }, |
| 184 | + ], |
| 185 | + }, |
| 186 | + }), |
| 187 | + detachPreviousScreen: false, |
| 188 | +}; |
| 189 | + |
| 190 | +const isAccountSelectorRootModalRoute = (params: object | undefined) => |
| 191 | + Boolean( |
| 192 | + params && |
| 193 | + 'screen' in params && |
| 194 | + params.screen === Routes.SHEET.ACCOUNT_SELECTOR, |
| 195 | + ); |
| 196 | + |
169 | 197 | // Type helper for screen components that use v5 pattern of requiring route props |
170 | 198 | // In React Navigation v6, screen components should ideally use useRoute() hook, |
171 | 199 | // but for migration compatibility, we cast these components to satisfy the type checker. |
@@ -464,15 +492,7 @@ const RootModalFlow = (props: RootModalFlowProps) => ( |
464 | 492 | <Stack.Screen |
465 | 493 | name={Routes.SHEET.ACCOUNT_SELECTOR} |
466 | 494 | component={AccountSelector} |
467 | | - options={{ |
468 | | - cardStyle: { backgroundColor: importedColors.transparent }, |
469 | | - cardStyleInterpolator: () => ({ |
470 | | - overlayStyle: { |
471 | | - opacity: 0, |
472 | | - }, |
473 | | - }), |
474 | | - detachPreviousScreen: false, |
475 | | - }} |
| 495 | + options={accountSelectorTransitionOptions} |
476 | 496 | /> |
477 | 497 | <Stack.Screen |
478 | 498 | name={Routes.SHEET.ADD_WALLET} |
@@ -1009,6 +1029,11 @@ const AppFlow = () => { |
1009 | 1029 | <Stack.Screen |
1010 | 1030 | name={Routes.MODAL.ROOT_MODAL_FLOW} |
1011 | 1031 | component={RootModalFlow as ScreenComponent} |
| 1032 | + options={({ route }) => |
| 1033 | + isAccountSelectorRootModalRoute(route.params) |
| 1034 | + ? accountSelectorTransitionOptions |
| 1035 | + : {} |
| 1036 | + } |
1012 | 1037 | /> |
1013 | 1038 | <Stack.Screen |
1014 | 1039 | name={Routes.IMPORT_PRIVATE_KEY_VIEW} |
|
0 commit comments