refactor(ui): switch to native navigator

synonymdev · Jul 17, 2024 · 40505b6 · 40505b6
1 parent a5be540
commit 40505b6
Show file tree

Hide file tree

Showing 16 changed files with 196 additions and 275 deletions.
diff --git a/ios/bitkit.xcodeproj/project.pbxproj b/ios/bitkit.xcodeproj/project.pbxproj
diff --git a/package.json b/package.json
@@ -41,9 +41,8 @@
     "@react-native-clipboard/clipboard": "1.14.1",
     "@react-native-community/blur": "4.4.0",
     "@react-native-community/netinfo": "11.3.1",
-    "@react-navigation/native": "6.1.17",
-    "@react-navigation/native-stack": "6.9.26",
-    "@react-navigation/stack": "6.3.29",
+    "@react-navigation/native": "6.1.18",
+    "@react-navigation/native-stack": "6.10.1",
     "@reduxjs/toolkit": "2.2.3",
     "@shopify/react-native-skia": "1.2.1",
     "@synonymdev/blocktank-client": "0.0.50",

diff --git a/src/components/NavigationHeader.tsx b/src/components/NavigationHeader.tsx
@@ -37,7 +37,7 @@ const ActionButton = memo(
 				color="transparent"
 				hitSlop={{ top: 15, bottom: 15, left: 15, right: 15 }}
 				testID={testID}
-				onPress={onPress}>
+				onPressIn={onPress}>
 				{children}
 			</Pressable>
 		);

diff --git a/src/navigation/bottom-sheet/TreasureHuntNavigation.tsx b/src/navigation/bottom-sheet/TreasureHuntNavigation.tsx
@@ -6,10 +6,10 @@ import React, {
 	useState,
 } from 'react';
 import {
-	createStackNavigator,
-	StackNavigationProp,
-	StackNavigationOptions,
-} from '@react-navigation/stack';
+	createNativeStackNavigator,
+	NativeStackNavigationProp,
+	NativeStackNavigationOptions,
+} from '@react-navigation/native-stack';
 
 import BottomSheetWrapper from '../../components/BottomSheetWrapper';
 import { __E2E__ } from '../../constants/env';
@@ -26,7 +26,7 @@ import { addTreasureChest } from '../../store/slices/settings';
 import { __TREASURE_HUNT_HOST__ } from '../../constants/env';
 
 export type TreasureHuntNavigationProp =
-	StackNavigationProp<TreasureHuntStackParamList>;
+	NativeStackNavigationProp<TreasureHuntStackParamList>;
 
 export type TreasureHuntStackParamList = {
 	Chest: undefined;
@@ -36,12 +36,12 @@ export type TreasureHuntStackParamList = {
 	Error: undefined;
 };
 
-const Stack = createStackNavigator<TreasureHuntStackParamList>();
+const Stack = createNativeStackNavigator<TreasureHuntStackParamList>();
 
-const screenOptions: StackNavigationOptions = {
+const screenOptions: NativeStackNavigationOptions = {
 	presentation: 'transparentModal',
 	headerShown: false,
-	animationEnabled: __E2E__ ? false : true,
+	animation: __E2E__ ? 'none' : 'default',
 };
 
 const TreasureHuntNavigation = (): ReactElement => {

diff --git a/src/navigation/root/RootNavigator.tsx b/src/navigation/root/RootNavigator.tsx
@@ -6,19 +6,17 @@ import React, {
 	useRef,
 	useState,
 } from 'react';
-import { AppState, Linking, Platform } from 'react-native';
+import { AppState, Linking } from 'react-native';
 import {
 	LinkingOptions,
 	createNavigationContainerRef,
 } from '@react-navigation/native';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { useTranslation } from 'react-i18next';
 import {
-	createStackNavigator,
-	StackNavigationOptions,
-	TransitionPresets,
-} from '@react-navigation/stack';
-import type { TransitionSpec } from '@react-navigation/stack/lib/typescript/src/types';
+	createNativeStackNavigator,
+	NativeStackNavigationOptions,
+} from '@react-navigation/native-stack';
 
 import { NavigationContainer } from '../../styles/components';
 import { processInputData } from '../../utils/scanner';
@@ -65,42 +63,13 @@ import WidgetsOnboarding from '../../screens/Widgets/WidgetsOnboarding';
 import { __E2E__ } from '../../constants/env';
 import type { RootStackParamList } from '../types';
 
-const Stack = createStackNavigator<RootStackParamList>();
+const Stack = createNativeStackNavigator<RootStackParamList>();
 
-const screenOptions: StackNavigationOptions = {
-	...TransitionPresets.SlideFromRightIOS,
+const screenOptions: NativeStackNavigationOptions = {
 	headerShown: false,
-	// we can't use it because bottom-sheet components
-	// are starting to appear on the screen even they are closed
-	// animationEnabled: !__E2E__,
+	animation: __E2E__ ? 'none' : 'default',
 };
 
-if (__E2E__) {
-	if (Platform.OS === 'ios') {
-		screenOptions.animationEnabled = false;
-	} else {
-		// can't use animationEnabled = false for android because
-		// it causes a bug where bottom-sheet components are
-		// appearing on the screen even they are closed
-		const config: TransitionSpec = {
-			animation: 'spring',
-			config: {
-				stiffness: 100000000, // make it fast
-				damping: 500,
-				mass: 3,
-				overshootClamping: true,
-				restDisplacementThreshold: 0.01,
-				restSpeedThreshold: 0.01,
-			},
-		};
-
-		screenOptions.transitionSpec = {
-			open: config,
-			close: config,
-		};
-	}
-}
-
 /**
  * Helper function to navigate from outside components.
  */
@@ -238,13 +207,17 @@ const RootNavigator = (): ReactElement => {
 					name="ActivityAssignContact"
 					component={ActivityAssignContact}
 				/>
-				<Stack.Screen name="Scanner" component={ScannerScreen} />
+				<Stack.Screen
+					name="Scanner"
+					component={ScannerScreen}
+					options={{ animation: 'slide_from_right' }}
+				/>
 				<Stack.Screen name="LightningRoot" component={LightningNavigator} />
 				<Stack.Screen name="Settings" component={SettingsNavigator} />
 				<Stack.Screen
 					name="Profile"
 					component={Profile}
-					options={{ gestureDirection: 'horizontal-inverted' }}
+					options={{ animation: 'slide_from_left' }}
 				/>
 				<Stack.Screen name="ProfileEdit" component={ProfileEdit} />
 				<Stack.Screen name="Contacts" component={Contacts} />

diff --git a/src/navigation/settings/SettingsNavigator.tsx b/src/navigation/settings/SettingsNavigator.tsx
@@ -1,11 +1,10 @@
 import React, { ReactElement } from 'react';
-import { Platform } from 'react-native';
 import { NavigatorScreenParams } from '@react-navigation/native';
 import {
-	createStackNavigator,
-	StackNavigationOptions,
-	StackNavigationProp,
-} from '@react-navigation/stack';
+	createNativeStackNavigator,
+	NativeStackNavigationOptions,
+	NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
 
 import MainSettings from '../../screens/Settings';
 import CurrenciesSettings from '../../screens/Settings/Currencies';
@@ -58,7 +57,7 @@ import AppStatus from '../../screens/Settings/AppStatus';
 import { TChannel } from '../../store/types/lightning';
 
 export type SettingsNavigationProp =
-	StackNavigationProp<SettingsStackParamList>;
+	NativeStackNavigationProp<SettingsStackParamList>;
 
 export type SettingsStackParamList = {
 	AuthCheck: {
@@ -112,13 +111,11 @@ export type SettingsStackParamList = {
 	LedgerTransaction: { ledgerTxId: number };
 };
 
-const Stack = createStackNavigator<SettingsStackParamList>();
+const Stack = createNativeStackNavigator<SettingsStackParamList>();
 
-const screenOptions: StackNavigationOptions = {
-	// prevent flickering issue on Android
-	presentation: Platform.OS === 'ios' ? 'card' : 'transparentModal',
+const screenOptions: NativeStackNavigationOptions = {
 	headerShown: false,
-	animationEnabled: !__E2E__,
+	animation: __E2E__ ? 'none' : 'default',
 };
 
 const SettingsNavigator = (): ReactElement => {

diff --git a/src/navigation/types/index.ts b/src/navigation/types/index.ts
@@ -1,12 +1,11 @@
-import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import {
+	NativeStackNavigationProp,
+	NativeStackScreenProps,
+} from '@react-navigation/native-stack';
 import type {
 	NavigatorScreenParams,
 	CompositeScreenProps,
 } from '@react-navigation/native';
-import type {
-	StackNavigationProp,
-	StackScreenProps,
-} from '@react-navigation/stack';
 
 import type { IActivityItem } from '../../store/types/activity';
 import type { TWidgetSettings } from '../../store/types/widgets';
@@ -27,7 +26,7 @@ import type { TreasureHuntStackParamList } from '../bottom-sheet/TreasureHuntNav
 // TODO: move all navigation related types here
 // https://reactnavigation.org/docs/typescript#organizing-types
 
-export type RootNavigationProp = StackNavigationProp<RootStackParamList>;
+export type RootNavigationProp = NativeStackNavigationProp<RootStackParamList>;
 
 export type RootStackParamList = {
 	Wallet: NavigatorScreenParams<WalletStackParamList> | undefined;
@@ -58,7 +57,7 @@ export type RootStackParamList = {
 
 // Root Stack Navigator
 export type RootStackScreenProps<T extends keyof RootStackParamList> =
-	StackScreenProps<RootStackParamList, T>;
+	NativeStackScreenProps<RootStackParamList, T>;
 
 export type OnboardingStackScreenProps<
 	T extends keyof OnboardingStackParamList,

diff --git a/src/navigation/wallet/WalletNavigator.tsx b/src/navigation/wallet/WalletNavigator.tsx
@@ -1,10 +1,9 @@
 import React, { ReactElement, useState } from 'react';
 import {
-	createStackNavigator,
-	StackNavigationOptions,
-	StackNavigationProp,
-	TransitionPresets,
-} from '@react-navigation/stack';
+	createNativeStackNavigator,
+	NativeStackNavigationOptions,
+	NativeStackNavigationProp,
+} from '@react-navigation/native-stack';
 
 import WalletsScreen from '../../screens/Wallets';
 import ActivitySavings from '../../screens/Activity/ActivitySavings';
@@ -24,13 +23,13 @@ export type WalletStackParamList = {
 	ActivityFiltered: undefined;
 };
 
-export type WalletNavigationProp = StackNavigationProp<WalletStackParamList>;
+export type WalletNavigationProp =
+	NativeStackNavigationProp<WalletStackParamList>;
 
-const Stack = createStackNavigator<WalletStackParamList>();
-const screenOptions: StackNavigationOptions = {
-	...TransitionPresets.SlideFromRightIOS,
+const Stack = createNativeStackNavigator<WalletStackParamList>();
+const screenOptions: NativeStackNavigationOptions = {
 	headerShown: false,
-	animationEnabled: !__E2E__,
+	animation: __E2E__ ? 'none' : 'default',
 };
 
 const WalletsStack = ({

diff --git a/src/screens/Contacts/AddContact.tsx b/src/screens/Contacts/AddContact.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement, useState } from 'react';
 import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { StackNavigationProp } from '@react-navigation/stack';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { parse } from '@synonymdev/slashtags-url';
 import { useTranslation } from 'react-i18next';
@@ -25,7 +25,7 @@ import {
 const AddContact = ({
 	navigation,
 }: {
-	navigation: StackNavigationProp<RootStackParamList, 'Contacts'>;
+	navigation: NativeStackNavigationProp<RootStackParamList, 'Contacts'>;
 }): ReactElement => {
 	const { t } = useTranslation('slashtags');
 	const snapPoints = useSnapPoints('small');

diff --git a/src/screens/Contacts/ContactsOnboarding.tsx b/src/screens/Contacts/ContactsOnboarding.tsx
@@ -1,5 +1,5 @@
 import React, { ReactElement } from 'react';
-import { StackScreenProps } from '@react-navigation/stack';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
 import { Trans, useTranslation } from 'react-i18next';
 
 import { Display } from '../../styles/text';
@@ -10,7 +10,10 @@ import OnboardingScreen from '../../components/OnboardingScreen';
 
 const imageSrc = require('../../assets/illustrations/group.png');
 
-type ContactsOnboardingProps = StackScreenProps<RootStackParamList, 'Contacts'>;
+type ContactsOnboardingProps = NativeStackScreenProps<
+	RootStackParamList,
+	'Contacts'
+>;
 
 const ContactsOnboarding = ({
 	navigation,