TW-1143: Migration to native stack

package.json

@@ -44,9 +44,8 @@
     "@react-native-firebase/app-check": "^17.5.0",
     "@react-native-firebase/messaging": "^17.5.0",
     "@react-native-google-signin/google-signin": "9.0.2",
-    "@react-navigation/bottom-tabs": "^6.4.0",
-    "@react-navigation/native": "^6.0.13",
-    "@react-navigation/stack": "^6.3.2",
+    "@react-navigation/native": "^6.1.9",
+    "@react-navigation/native-stack": "^6.9.16",
     "@reduxjs/toolkit": "^1.8.5",
     "@sentry/react-native": "5.9.1",
     "@shopify/flash-list": "^1.6.1",

src/components/header/exolix-screen-options.tsx

@@ -1,9 +1,10 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React, { FC, useMemo } from 'react';
 
-import { useNavigation } from '../../navigator/hooks/use-navigation.hook';
-import { useExolixStep } from '../../store/exolix/exolix-selectors';
-import { IconNameEnum } from '../icon/icon-name.enum';
+import { IconNameEnum } from 'src/components/icon/icon-name.enum';
+import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
+import { useExolixStep } from 'src/store/exolix/exolix-selectors';
+
 import { HeaderButton } from './header-button/header-button';
 import { HeaderProgress } from './header-progress/header-progress';
 import { HeaderTitle } from './header-title/header-title';
@@ -18,7 +19,7 @@ const BackButton: FC = () => {
   return <HeaderButton iconName={IconNameEnum.ArrowLeft} onPress={handleOnPress} />;
 };
 
-export const exolixScreenOptions = (): StackNavigationOptions => ({
+export const exolixScreenOptions = (): NativeStackNavigationOptions => ({
   headerTitleAlign: 'center',
   headerLeft: () => <BackButton />,
   headerTitle: () => <TitleComponent />,

src/components/header/generate-screen-options.util.tsx

@@ -1,4 +1,4 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React, { FC } from 'react';
 
 import { HeaderBackButton } from './header-back-button/header-back-button';
@@ -7,7 +7,7 @@ export const generateScreenOptions = (
   headerTitleElement: ReturnType<FC>,
   headerRightElement: ReturnType<FC> = null,
   headerLeft = true
-): StackNavigationOptions => ({
+): NativeStackNavigationOptions => ({
   headerTitleAlign: 'center',
   headerLeft: () => headerLeft && <HeaderBackButton />,
   headerTitle: () => headerTitleElement,

src/components/header/header-action/header-actions.styles.ts

@@ -6,7 +6,8 @@ export const useHeaderTitleStyles = createUseStyles(() => ({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    marginRight: formatSize(18)
+    marginTop: formatSize(4),
+    marginRight: formatSize(4)
   },
   icons: {
     marginLeft: formatSize(18)

src/components/header/header-button/header-button.styles.ts

@@ -4,6 +4,6 @@ import { formatSize } from 'src/styles/format-size';
 
 export const HeaderButtonStyles = StyleSheet.create({
   icon: {
-    marginHorizontal: formatSize(16)
+    marginTop: formatSize(4)
   }
 });

src/components/header/header-progress/header-progress.styles.ts

@@ -5,8 +5,7 @@ import { formatSize } from '../../../styles/format-size';
 
 export const useHeaderProgressStyles = createUseStyles(({ colors, typography }) => ({
   container: {
-    alignItems: 'center',
-    marginHorizontal: formatSize(16)
+    alignItems: 'center'
   },
   text: {
     ...typography.caption13Semibold,

src/components/header/use-modal-options.util.tsx

@@ -1,27 +1,22 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import React from 'react';
 
-import { isIOS } from '../../config/system';
-import { formatSize } from '../../styles/format-size';
-import { useColors } from '../../styles/use-colors';
+import { isIOS } from 'src/config/system';
+import { useColors } from 'src/styles/use-colors';
+
 import { HeaderCloseButton } from './header-close-button/header-close-button';
 import { HeaderTitle } from './header-title/header-title';
 
-export const useModalOptions = (title: string, disableAndroidGestures = false): StackNavigationOptions => {
+export const useModalOptions = (title: string, disableAndroidGestures = false): NativeStackNavigationOptions => {
   const colors = useColors();
 
   return {
     headerTitleAlign: 'center',
-    headerStatusBarHeight: 0,
+    headerBackVisible: false,
     headerStyle: {
-      height: formatSize(60),
-      backgroundColor: colors.navigation,
-      borderBottomWidth: formatSize(0.5),
-      borderBottomColor: colors.lines,
-      shadowOpacity: 0
+      backgroundColor: colors.navigation
     },
     gestureEnabled: disableAndroidGestures ? isIOS : undefined,
-    gestureResponseDistance: isIOS ? undefined : 30,
     headerLeft: () => null,
     headerTitle: () => <HeaderTitle title={title} />,
     headerRight: () => <HeaderCloseButton />

src/components/header/use-navigation-set-options.hook.ts

@@ -1,9 +1,9 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { DependencyList, useEffect } from 'react';
 
 import { useNavigation } from 'src/navigator/hooks/use-navigation.hook';
 
-export const useNavigationSetOptions = (options: Partial<StackNavigationOptions>, deps: DependencyList) => {
+export const useNavigationSetOptions = (options: Partial<NativeStackNavigationOptions>, deps: DependencyList) => {
   const { setOptions } = useNavigation();
 
   useEffect(() => setOptions(options), deps);

src/modals/manage-earn-opportunity-modal/details-card/stats-item/styles.ts

@@ -8,7 +8,6 @@ export const useStatsItemStyles = createUseStylesMemoized(({ colors, typography
   title: {
     ...typography.caption11Regular,
     letterSpacing: formatSize(0.07),
-    textIndent: formatSize(1),
     marginBottom: formatSize(2),
     color: colors.gray1
   },

src/navigator/hooks/use-stack-navigation-options.hook.ts

@@ -1,17 +1,17 @@
-import { StackNavigationOptions, TransitionPresets } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 import { useMemo } from 'react';
 
-import { useColors } from '../../styles/use-colors';
+import { useColors } from 'src/styles/use-colors';
 
 export const useStackNavigationOptions = () => {
   const colors = useColors();
 
-  return useMemo<StackNavigationOptions>(
+  return useMemo<NativeStackNavigationOptions>(
     () => ({
+      headerBackVisible: false,
       presentation: 'modal',
       cardOverlayEnabled: true,
       gestureEnabled: true,
-      ...TransitionPresets.ModalPresentationIOS,
       cardStyle: {
         backgroundColor: colors.pageBG
       }

src/navigator/hooks/use-stack-navigator-style-options.hook.ts

@@ -1,20 +1,15 @@
-import { StackNavigationOptions } from '@react-navigation/stack';
+import { NativeStackNavigationOptions } from '@react-navigation/native-stack';
 
-import { formatSize } from 'src/styles/format-size';
-import { generateShadow } from 'src/styles/generate-shadow';
 import { useColors } from 'src/styles/use-colors';
 
-export const useStackNavigatorStyleOptions = (): StackNavigationOptions => {
+export const useStackNavigatorStyleOptions = (): NativeStackNavigationOptions => {
   const colors = useColors();
 
   return {
+    headerBackVisible: false,
     headerStyle: {
-      ...generateShadow(1, colors.lines),
-      backgroundColor: colors.navigation,
-      borderBottomWidth: formatSize(0.5),
-      borderBottomColor: colors.lines
+      backgroundColor: colors.navigation
     },
-    headerTitleStyle: { color: colors.black },
-    cardStyle: { backgroundColor: colors.pageBG }
+    headerTitleStyle: { color: colors.black }
   };
 };

src/navigator/main-stack.tsx

@@ -1,5 +1,5 @@
 import { PortalProvider } from '@gorhom/portal';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
 
@@ -86,7 +86,7 @@ import { ScreensEnum, ScreensParamList } from './enums/screens.enum';
 import { useStackNavigatorStyleOptions } from './hooks/use-stack-navigator-style-options.hook';
 import { NavigationBar } from './navigation-bar/navigation-bar';
 
-const MainStack = createStackNavigator<ScreensParamList>();
+const MainStack = createNativeStackNavigator<ScreensParamList>();
 
 export const MainStackScreen = () => {
   const dispatch = useDispatch();
@@ -181,22 +181,28 @@ export const MainStackScreen = () => {
               <MainStack.Screen
                 name={ScreensEnum.Wallet}
                 component={Wallet}
-                options={{ animationEnabled: false, headerShown: false }}
+                options={{ animation: 'none', headerShown: false }}
               />
               <MainStack.Screen
                 name={ScreensEnum.CollectiblesHome}
                 component={CollectiblesHome}
-                options={{ animationEnabled: false, headerShown: false }}
+                options={{ animation: 'none', headerShown: false }}
               />
               <MainStack.Screen
                 name={ScreensEnum.TezosTokenScreen}
                 component={TezosTokenScreen}
-                options={generateScreenOptions(<HeaderTokenInfo token={metadata} />)}
+                options={{
+                  ...generateScreenOptions(<HeaderTokenInfo token={metadata} />),
+                  headerShadowVisible: false
+                }}
               />
               <MainStack.Screen
                 name={ScreensEnum.TokenScreen}
                 component={TokenScreen}
-                options={generateScreenOptions(<HeaderTokenInfo token={emptyTokenMetadata} />)}
+                options={{
+                  ...generateScreenOptions(<HeaderTokenInfo token={emptyTokenMetadata} />),
+                  headerShadowVisible: false
+                }}
               />
               <MainStack.Screen
                 name={ScreensEnum.Delegation}
@@ -257,7 +263,7 @@ export const MainStackScreen = () => {
               <MainStack.Screen
                 name={ScreensEnum.DApps}
                 component={DApps}
-                options={{ animationEnabled: false, headerShown: false }}
+                options={{ animation: 'none', headerShown: false }}
               />
 
               {/** Swap stack **/}
@@ -268,7 +274,7 @@ export const MainStackScreen = () => {
                     component={SwapScreen}
                     options={{
                       ...generateScreenOptions(<HeaderTitle title="Swap" />, <HeaderAction />, false),
-                      animationEnabled: false
+                      animation: 'none'
                     }}
                   />
 
@@ -284,14 +290,14 @@ export const MainStackScreen = () => {
               <MainStack.Screen
                 name={ScreensEnum.Market}
                 component={Market}
-                options={{ animationEnabled: false, headerShown: false }}
+                options={{ animation: 'none', headerShown: false }}
               />
 
               {/** Settings stack **/}
               <MainStack.Screen
                 name={ScreensEnum.Settings}
                 component={Settings}
-                options={{ animationEnabled: false, headerShown: false }}
+                options={{ animation: 'none', headerShown: false }}
               />
               <MainStack.Screen
                 name={ScreensEnum.ManageAccounts}

src/navigator/root-stack.tsx

@@ -1,6 +1,6 @@
 import { PortalProvider } from '@gorhom/portal';
 import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { BigNumber } from 'bignumber.js';
 import React, { useCallback, useState } from 'react';
 import { useDispatch } from 'react-redux';
@@ -53,7 +53,7 @@ import { MainStackScreen } from './main-stack';
 
 export type RootStackParamList = { MainStack: undefined } & ModalsParamList;
 
-const RootStack = createStackNavigator<RootStackParamList>();
+const RootStack = createNativeStackNavigator<RootStackParamList>();
 
 export const RootStackScreen = () => {
   const { isLocked } = useAppLock();

src/screens/earn/opportunity-category-card/styles.ts

@@ -41,7 +41,6 @@ export const useOpportunityCategoryCardStyles = createUseStylesMemoized(({ color
   statsItemLabel: {
     ...typography.caption11Regular,
     letterSpacing: formatSize(0.07),
-    textIndent: formatSize(1),
     color: colors.gray1
   },
   statsItemValue: {

src/screens/wallet/token-list/token-list.tsx

@@ -26,6 +26,7 @@ import { loadPartnersPromoActions } from 'src/store/partners-promotion/partners-
 import { setZeroBalancesShown } from 'src/store/settings/settings-actions';
 import { useHideZeroBalancesSelector, useIsEnabledAdsBannerSelector } from 'src/store/settings/settings-selectors';
 import {
+  useSelectedAccountSelector,
   useSelectedAccountTezosTokenSelector,
   useSelectedAccountTkeyTokenSelector,
   useVisibleTokensListSelector
@@ -77,6 +78,8 @@ export const TokensList: FC = () => {
   const isEnabledAdsBanner = useIsEnabledAdsBannerSelector();
   const partnersPromoShown = useIsPartnersPromoShown();
 
+  const { publicKeyHash } = useSelectedAccountSelector();
+
   const handleHideZeroBalanceChange = useCallback((value: boolean) => {
     dispatch(setZeroBalancesShown(value));
     trackEvent(WalletSelectors.hideZeroBalancesCheckbox, AnalyticsEventCategory.ButtonPress);