upgrade react navigation

NavigationService.ts

@@ -1,15 +1,18 @@
-import { NavigationActions } from 'react-navigation';
+import {
+    CommonActions,
+    NavigationContainerRef
+} from '@react-navigation/native';
 
-let _navigator;
+let _navigator: NavigationContainerRef<{}>;
 
-function setTopLevelNavigator(navigatorRef) {
+function setTopLevelNavigator(navigatorRef: NavigationContainerRef<{}>) {
     _navigator = navigatorRef;
 }
 
 function navigate(routeName: string, params?: any) {
     _navigator.dispatch(
-        NavigationActions.navigate({
-            routeName,
+        CommonActions.navigate({
+            name: routeName,
             params
         })
     );

components/LayerBalances/LightningSwipeableRow.tsx

@@ -9,6 +9,7 @@ import {
     TouchableOpacity
 } from 'react-native';
 import { getParams as getlnurlParams } from 'js-lnurl';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import { RectButton } from 'react-native-gesture-handler';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
@@ -24,7 +25,7 @@ import Routing from './../../assets/images/SVG/Routing.svg';
 import Send from './../../assets/images/SVG/Send.svg';
 
 interface LightningSwipeableRowProps {
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     lightning?: string;
     locked?: boolean;
 }

components/LayerBalances/OnchainSwipeableRow.tsx

@@ -7,9 +7,10 @@ import {
     I18nManager,
     TouchableOpacity
 } from 'react-native';
-
 import { RectButton } from 'react-native-gesture-handler';
 import Swipeable from 'react-native-gesture-handler/Swipeable';
+import { StackNavigationProp } from '@react-navigation/stack';
+
 import BackendUtils from './../../utils/BackendUtils';
 import { localeString } from './../../utils/LocaleUtils';
 import { themeColor } from './../../utils/ThemeUtils';
@@ -19,7 +20,7 @@ import Receive from './../../assets/images/SVG/Receive.svg';
 import Send from './../../assets/images/SVG/Send.svg';
 
 interface OnchainSwipeableRowProps {
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     value?: string;
     amount?: string;
     locked?: boolean;

components/LayerBalances/index.tsx

@@ -9,6 +9,7 @@ import {
 } from 'react-native';
 import LinearGradient from 'react-native-linear-gradient';
 import { RectButton } from 'react-native-gesture-handler';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import { inject, observer } from 'mobx-react';
 import Amount from '../Amount';
@@ -37,7 +38,7 @@ interface LayerBalancesProps {
     BalanceStore: BalanceStore;
     UTXOsStore: UTXOsStore;
     UnitsStore: UnitsStore;
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     onRefresh?: any;
     value?: string;
     amount?: string;
@@ -164,7 +165,7 @@ const SwipeableRow = ({
 }: {
     item: DataRow;
     index: number;
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     selectMode: boolean;
     value?: string;
     amount?: string;

components/OnchainFeeInput.tsx

@@ -1,18 +1,20 @@
 import React, { useEffect, useState } from 'react';
 import { Text, TouchableWithoutFeedback, View } from 'react-native';
+import { StackNavigationProp } from '@react-navigation/native';
+
 import TextInput from '../components/TextInput';
 import { themeColor } from '../utils/ThemeUtils';
 import stores from '../stores/Stores';
-import NavigationService from '../NavigationService';
 import LoadingIndicator from './LoadingIndicator';
 
 interface OnchainFeeInputProps {
+    navigation: StackNavigationProp<any, any>;
     fee?: string;
     onChangeFee: (fee: string) => void;
 }
 
 export default function OnchainFeeInput(props: OnchainFeeInputProps) {
-    const { fee, onChangeFee } = props;
+    const { fee, onChangeFee, navigation } = props;
 
     const { settingsStore, feeStore } = stores;
     const { settings } = settingsStore;
@@ -48,7 +50,7 @@ export default function OnchainFeeInput(props: OnchainFeeInputProps) {
             {enableMempoolRates ? (
                 <TouchableWithoutFeedback
                     onPress={() =>
-                        NavigationService.navigate('EditFee', {
+                        navigation.navigate('EditFee', {
                             onNavigateBack: onChangeFee,
                             fee: newFee
                         })

components/QRCodeScanner.tsx

@@ -11,6 +11,7 @@ import {
 import { Camera } from 'react-native-camera-kit';
 import { check, request, PERMISSIONS, RESULTS } from 'react-native-permissions';
 import { launchImageLibrary } from 'react-native-image-picker';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 const LocalQRCode = require('@remobile/react-native-qrcode-local-image');
 
@@ -29,7 +30,7 @@ interface QRProps {
     text?: string;
     handleQRScanned: any;
     goBack: any;
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     parts?: number;
     totalParts?: number;
     mode?: string;
@@ -101,11 +102,11 @@ export default class QRCodeScanner extends React.Component<QRProps, QRState> {
         }
     };
 
+    handleFocus = () => (this.scannedCache = {});
+
     async componentDidMount() {
         // triggers when loaded from navigation or back action
-        this.props.navigation.addListener('didFocus', () => {
-            this.scannedCache = {};
-        });
+        this.props.navigation.addListener('focus', this.handleFocus);
 
         if (Platform.OS !== 'ios' && Platform.OS !== 'macos') {
             // For android
@@ -176,7 +177,7 @@ export default class QRCodeScanner extends React.Component<QRProps, QRState> {
 
     componentWillUnmount() {
         this.props.navigation.removeListener &&
-            this.props.navigation.removeListener('didFocus');
+            this.props.navigation.removeListener('focus', this.handleFocus);
     }
 
     render() {

components/WalletHeader.tsx

@@ -12,6 +12,7 @@ import {
 } from 'react-native';
 import { inject, observer } from 'mobx-react';
 import Clipboard from '@react-native-clipboard/clipboard';
+import { StackNavigationProp } from '@react-navigation/stack';
 
 import ChannelsStore from '../stores/ChannelsStore';
 import LightningAddressStore from '../stores/LightningAddressStore';
@@ -83,7 +84,11 @@ const MailboxAnimated = () => {
     );
 };
 
-const ActivityButton = ({ navigation }: { navigation: any }) => (
+const ActivityButton = ({
+    navigation
+}: {
+    navigation: StackNavigationProp<any, any>;
+}) => (
     <View style={{ width: 80 }}>
         <Button
             icon={{
@@ -98,7 +103,11 @@ const ActivityButton = ({ navigation }: { navigation: any }) => (
     </View>
 );
 
-const TempleButton = ({ navigation }: { navigation: any }) => (
+const TempleButton = ({
+    navigation
+}: {
+    navigation: StackNavigationProp<any, any>;
+}) => (
     <TouchableOpacity
         onPress={() => protectedNavigation(navigation, 'Wallet', true)}
     >
@@ -111,7 +120,11 @@ const TempleButton = ({ navigation }: { navigation: any }) => (
     </TouchableOpacity>
 );
 
-const ScanBadge = ({ navigation }: { navigation: any }) => (
+const ScanBadge = ({
+    navigation
+}: {
+    navigation: StackNavigationProp<any, any>;
+}) => (
     <TouchableOpacity
         onPress={() => navigation.navigate('HandleAnythingQRScanner')}
         accessibilityLabel={localeString('general.scan')}
@@ -124,7 +137,7 @@ const ClipboardBadge = ({
     navigation,
     clipboard
 }: {
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     clipboard: string;
 }) => (
     <TouchableOpacity
@@ -162,7 +175,7 @@ interface WalletHeaderProps {
     LightningAddressStore?: LightningAddressStore;
     PosStore?: PosStore;
     SyncStore?: SyncStore;
-    navigation: any;
+    navigation: StackNavigationProp<any, any>;
     loading: boolean;
     title: string;
     channels: boolean;
@@ -383,7 +396,11 @@ export default class WalletHeader extends React.Component<
             </TouchableOpacity>
         );
 
-        const SyncBadge = ({ navigation }: { navigation: any }) => {
+        const SyncBadge = ({
+            navigation
+        }: {
+            navigation: StackNavigationProp<any, any>;
+        }) => {
             const [spinAnim] = useState(new Animated.Value(0));
 
             const interpolateRotation = spinAnim.interpolate({

index.js

@@ -1,3 +1,5 @@
+import 'react-native-gesture-handler';
+
 /**
  * @format
  * @lint-ignore-every XPLATJSCOPYRIGHT1
@@ -9,7 +11,6 @@ import { TextDecoder } from 'text-encoding';
 global.TextDecoder = TextDecoder;
 
 import {AppRegistry} from 'react-native';
-import 'react-native-gesture-handler';
 import './shim.js'
 import App from './App.tsx';
 import {name as appName} from './app.json';

package.json

@@ -36,11 +36,12 @@
     "@ngraveio/bc-ur": "1.1.12",
     "@react-native-async-storage/async-storage": "1.22.0",
     "@react-native-clipboard/clipboard": "1.13.2",
-    "@react-native-community/masked-view": "0.1.11",
     "@react-native-community/netinfo": "11.3.0",
+    "@react-native-masked-view/masked-view": "0.3.1",
     "@react-native-picker/picker": "2.6.1",
-    "@react-navigation/bottom-tabs": "5.11.11",
-    "@react-navigation/native": "6.1.10",
+    "@react-navigation/bottom-tabs": "6.5.20",
+    "@react-navigation/native": "6.1.17",
+    "@react-navigation/stack": "6.3.29",
     "@remobile/react-native-qrcode-local-image": "github:BlueWallet/react-native-qrcode-local-image#31b0113",
     "@scure/base": "1.1.6",
     "@tradle/react-native-http": "2.0.1",
@@ -122,7 +123,7 @@
     "react-native-reanimated": "3.7.0",
     "react-native-reanimated-carousel": "3.5.1",
     "react-native-restart": "0.0.27",
-    "react-native-safe-area-context": "0.6.4",
+    "react-native-safe-area-context": "4.10.1",
     "react-native-screens": "3.29.0",
     "react-native-securerandom": "1.0.1",
     "react-native-snap-carousel": "meliorence/react-native-snap-carousel#962/head",
@@ -134,8 +135,6 @@
     "react-native-udp": "4.1.7",
     "react-native-v8": "0.61.5-patch.4",
     "react-native-vector-icons": "7.1.0",
-    "react-navigation": "4.4.4",
-    "react-navigation-stack": "2.0.16",
     "readable-stream": "1.0.33",
     "sha.js": "2.4.11",
     "socket.io-client": "4.7.2",

utils/ErrorUtils.ts

@@ -21,8 +21,8 @@ const errorToUserFriendly = (error: Error, localize = true) => {
 
     try {
         errorObject = JSON.parse(errorMessage || error.toString());
-    } catch (err) {
-        console.log(err);
+    } catch {
+        // ignore - using original error message
     }
 
     const userFriendlyErrorMessage =

utils/LinkingUtils.ts

@@ -1,9 +1,11 @@
 import { Linking, Platform, NativeModules } from 'react-native';
+import { StackNavigationProp } from '@react-navigation/stack';
+
 import { localeString } from './LocaleUtils';
 import handleAnything from './handleAnything';
 
 class LinkingUtils {
-    handleInitialUrl = (navigation: any) =>
+    handleInitialUrl = (navigation: StackNavigationProp<any, any>) =>
         Linking.getInitialURL().then(async (url) => {
             if (url) {
                 this.handleDeepLink(url, navigation);
@@ -15,7 +17,10 @@ class LinkingUtils {
                 if (nfcData) this.handleDeepLink(nfcData, navigation);
             }
         });
-    handleDeepLink = (url: string, navigation: any) => {
+    handleDeepLink = (
+        url: string,
+        navigation: StackNavigationProp<any, any>
+    ) => {
         if (url.startsWith('nostr:')) {
             Linking.openURL(url);
         } else {

utils/NavigationUtils.ts

@@ -1,7 +1,9 @@
+import { StackNavigationProp } from '@react-navigation/stack';
+
 import stores from '../stores/Stores';
 
 const protectedNavigation = async (
-    navigation: any,
+    navigation: StackNavigationProp<any, any>,
     route: string,
     disactivatePOS?: boolean
 ) => {