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,19 +1,21 @@
 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 { localeString } from '../utils/LocaleUtils';
 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;
@@ -50,7 +52,7 @@ export default function OnchainFeeInput(props: OnchainFeeInputProps) {
             {enableMempoolRates ? (
                 <TouchableWithoutFeedback
                     onPress={() =>
-                        NavigationService.navigate('EditFee', {
+                        navigation.navigate('EditFee', {
                             onNavigateBack: (fee: string) => {
                                 if (fee) {
                                     setErrorOccurredLoadingFees(false);

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';
@@ -35,7 +36,7 @@ import { themeColor } from '../utils/ThemeUtils';
 
 import Add from '../assets/images/SVG/Add.svg';
 import ClipboardSVG from '../assets/images/SVG/Clipboard.svg';
-import Scan from '../assets/images/SVG/Scan.svg';
+import Gear from '../assets/images/SVG/Gear.svg';
 import POS from '../assets/images/SVG/POS.svg';
 import Search from '../assets/images/SVG/Search.svg';
 import Temple from '../assets/images/SVG/Temple.svg';
@@ -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,20 +120,24 @@ const TempleButton = ({ navigation }: { navigation: any }) => (
     </TouchableOpacity>
 );
 
-const ScanBadge = ({ navigation }: { navigation: any }) => (
+const SettingsBadge = ({
+    navigation
+}: {
+    navigation: StackNavigationProp<any, any>;
+}) => (
     <TouchableOpacity
-        onPress={() => navigation.navigate('HandleAnythingQRScanner')}
-        accessibilityLabel={localeString('general.scan')}
+        onPress={() => navigation.navigate('Settings')}
+        accessibilityLabel={localeString('views.Settings.title')}
     >
-        <Scan fill={themeColor('text')} width={30} height={30} />
+        <Gear fill={themeColor('text')} width={33} height={33} />
     </TouchableOpacity>
 );
 
 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;
@@ -237,10 +250,9 @@ export default class WalletHeader extends React.Component<
             (settings && settings.pos && settings.pos.posEnabled) ||
             PosEnabled.Disabled;
 
-        const SettingsButton = () => (
+        const NodeButton = () => (
             <TouchableOpacity
-                onPress={() => protectedNavigation(navigation, 'Settings')}
-                onLongPress={() => protectedNavigation(navigation, 'Nodes')}
+                onPress={() => protectedNavigation(navigation, 'Nodes')}
                 accessibilityLabel={localeString('views.Settings.title')}
             >
                 {selectedNode && selectedNode.photo ? (
@@ -383,7 +395,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({
@@ -426,7 +442,7 @@ export default class WalletHeader extends React.Component<
                 leftComponent={
                     loading ? undefined : (
                         <Row>
-                            <SettingsButton />
+                            <NodeButton />
                             {paid && paid.length > 0 && (
                                 <TouchableOpacity
                                     onPress={() =>
@@ -548,7 +564,7 @@ export default class WalletHeader extends React.Component<
                                 </View>
                             )}
                             <View>
-                                <ScanBadge navigation={navigation} />
+                                <SettingsBadge navigation={navigation} />
                             </View>
                             {posEnabled !== PosEnabled.Disabled && (
                                 <View

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';

ios/Podfile.lock

@@ -921,8 +921,8 @@ PODS:
     - React
   - react-native-restart (0.0.27):
     - React-Core
-  - react-native-safe-area-context (0.6.4):
-    - React
+  - react-native-safe-area-context (4.10.1):
+    - React-Core
   - react-native-tor (0.1.8):
     - React
   - react-native-udp (4.1.7):
@@ -1103,8 +1103,8 @@ PODS:
     - React-Core
   - RNCClipboard (1.13.2):
     - React-Core
-  - RNCMaskedView (0.1.11):
-    - React
+  - RNCMaskedView (0.3.1):
+    - React-Core
   - RNCPicker (2.6.1):
     - React-Core
   - RNFS (2.20.0):
@@ -1212,7 +1212,7 @@ DEPENDENCIES:
   - "RemobileReactNativeQrcodeLocalImage (from `../node_modules/@remobile/react-native-qrcode-local-image`)"
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
-  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
+  - "RNCMaskedView (from `../node_modules/@react-native-masked-view/masked-view`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
@@ -1379,7 +1379,7 @@ EXTERNAL SOURCES:
   RNCClipboard:
     :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCMaskedView:
-    :path: "../node_modules/@react-native-community/masked-view"
+    :path: "../node_modules/@react-native-masked-view/masked-view"
   RNCPicker:
     :path: "../node_modules/@react-native-picker/picker"
   RNFS:
@@ -1453,7 +1453,7 @@ SPEC CHECKSUMS:
   react-native-print: f704aef52d931bfce6d1d84351dbb5232d7ecb89
   react-native-randombytes: 3638d24759d67c68f6ccba60c52a7a8a8faa6a23
   react-native-restart: 7595693413fe3ca15893702f2c8306c62a708162
-  react-native-safe-area-context: 52342d2d80ea8faadd0ffa76d83b6051f20c5329
+  react-native-safe-area-context: dcab599c527c2d7de2d76507a523d20a0b83823d
   react-native-tor: 3b14e9160b2eb7fa3f310921b2dee71a5171e5b7
   react-native-udp: df79c3cb72c4e71240cd3ce4687bfb8a137140d5
   React-nativeconfig: 754233aac2a769578f828093b672b399355582e6
@@ -1480,7 +1480,7 @@ SPEC CHECKSUMS:
   RemobileReactNativeQrcodeLocalImage: 57aadc12896b148fb5e04bc7c6805f3565f5c3fa
   RNCAsyncStorage: c43e6d71e13bb4748503797784839e0fbbf89d56
   RNCClipboard: 60fed4b71560d7bfe40e9d35dea9762b024da86d
-  RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
+  RNCMaskedView: 090213d32d8b3bb83a4dcb7d12c18f0152591906
   RNCPicker: b18aaf30df596e9b1738e7c1f9ee55402a229dca
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 67fb54b3e6ca338a8044e85cd6f340265aa41091

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": "7.0.0-alpha.22",
+    "@react-navigation/native": "7.0.0-alpha.18",
+    "@react-navigation/stack": "7.0.0-alpha.20",
     "@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",