Migrate react naviagion library (#158)

React-Navigation upgrade to version 5

App.tsx

@@ -1,16 +1,16 @@
+import { NavigationContainer } from '@react-navigation/native';
 import * as Sentry from '@sentry/react-native';
 import React from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { View, YellowBox, StyleSheet } from 'react-native';
-import { createAppContainer } from 'react-navigation';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 
 import { BlueApp } from 'app/legacy';
 import { i18n } from 'app/locale';
 import { RootNavigator } from 'app/navigators';
 import { UnlockScreen } from 'app/screens';
-import { NavigationService, SecureStorageService, AppStateManager } from 'app/services';
+import { SecureStorageService, AppStateManager, navigationRef } from 'app/services';
 import { persistor, store } from 'app/state/store';
 
 YellowBox.ignoreWarnings(['VirtualizedLists should never be nested inside', `\`-[RCTRootView cancelTouches]\``]);
@@ -21,8 +21,6 @@ if (process.env.NODE_ENV !== 'development') {
   });
 }
 
-const AppContainer = createAppContainer(RootNavigator);
-
 interface State {
   isPinSet: boolean;
   successfullyAuthenticated: boolean;
@@ -71,13 +69,15 @@ export default class App extends React.PureComponent<State> {
           <AppStateManager handleAppComesToForeground={this.handleAppComesToForeground} />
           <PersistGate loading={null} persistor={persistor}>
             <View style={styles.wrapper}>
-              <AppContainer ref={NavigationService.setTopLevelNavigator} />
-              {this.showUnlockScreen && (
-                <UnlockScreen
-                  onSuccessfullyAuthenticated={this.onSuccessfullyAuthenticated}
-                  isBiometricEnabledByUser={isBiometricEnabledByUser}
-                />
-              )}
+              <NavigationContainer ref={navigationRef as any}>
+                <RootNavigator />
+                {this.showUnlockScreen && (
+                  <UnlockScreen
+                    onSuccessfullyAuthenticated={this.onSuccessfullyAuthenticated}
+                    isBiometricEnabledByUser={isBiometricEnabledByUser}
+                  />
+                )}
+              </NavigationContainer>
             </View>
           </PersistGate>
         </Provider>

ios/Podfile.lock

@@ -288,6 +288,8 @@ PODS:
     - React
   - react-native-restart (0.0.15):
     - React
+  - react-native-safe-area-context (3.0.6):
+    - React
   - react-native-slider (2.0.0-rc.1):
     - React
   - react-native-splash-screen (3.2.0):
@@ -335,6 +337,8 @@ PODS:
     - React
   - RNCClipboard (1.2.2):
     - React
+  - RNCMaskedView (0.1.10):
+    - React
   - RNDefaultPreference (1.4.1):
     - React
   - RNDeviceInfo (5.5.6):
@@ -357,7 +361,7 @@ PODS:
     - RNFBApp
   - RNFS (2.13.3):
     - React
-  - RNGestureHandler (1.5.6):
+  - RNGestureHandler (1.6.1):
     - React
   - RNHandoff (0.0.3):
     - React
@@ -367,6 +371,10 @@ PODS:
     - React
   - RNRate (1.0.1):
     - React
+  - RNReanimated (1.9.0):
+    - React
+  - RNScreens (2.9.0):
+    - React
   - RNSecureKeyStore (1.0.0):
     - React
   - RNSentry (1.0.9):
@@ -421,6 +429,7 @@ DEPENDENCIES:
   - react-native-image-picker (from `../node_modules/react-native-image-picker`)
   - react-native-randombytes (from `../node_modules/react-native-randombytes`)
   - react-native-restart (from `../node_modules/react-native-restart`)
+  - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
   - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -438,6 +447,7 @@ DEPENDENCIES:
   - "RemobileReactNativeQrcodeLocalImage (from `../node_modules/@remobile/react-native-qrcode-local-image`)"
   - "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
   - "RNCClipboard (from `../node_modules/@react-native-community/clipboard`)"
+  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNDefaultPreference (from `../node_modules/react-native-default-preference`)
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
   - RNFastImage (from `../node_modules/react-native-fast-image`)
@@ -450,6 +460,8 @@ DEPENDENCIES:
   - RNLocalize (from `../node_modules/react-native-localize`)
   - RNQuickAction (from `../node_modules/react-native-quick-actions`)
   - RNRate (from `../node_modules/react-native-rate/ios`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNScreens (from `../node_modules/react-native-screens`)
   - RNSecureKeyStore (from `../node_modules/react-native-secure-key-store/ios`)
   - "RNSentry (from `../node_modules/@sentry/react-native`)"
   - RNShare (from `../node_modules/react-native-share`)
@@ -530,6 +542,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-randombytes"
   react-native-restart:
     :path: "../node_modules/react-native-restart"
+  react-native-safe-area-context:
+    :path: "../node_modules/react-native-safe-area-context"
   react-native-slider:
     :path: "../node_modules/@react-native-community/slider"
   react-native-splash-screen:
@@ -562,6 +576,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/@react-native-community/async-storage"
   RNCClipboard:
     :path: "../node_modules/@react-native-community/clipboard"
+  RNCMaskedView:
+    :path: "../node_modules/@react-native-community/masked-view"
   RNDefaultPreference:
     :path: "../node_modules/react-native-default-preference"
   RNDeviceInfo:
@@ -586,6 +602,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-quick-actions"
   RNRate:
     :path: "../node_modules/react-native-rate/ios"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
+  RNScreens:
+    :path: "../node_modules/react-native-screens"
   RNSecureKeyStore:
     :path: "../node_modules/react-native-secure-key-store/ios"
   RNSentry:
@@ -646,6 +666,7 @@ SPEC CHECKSUMS:
   react-native-image-picker: 7a85cf7b0a53845f03ae52fb4592a2748ded069b
   react-native-randombytes: 3638d24759d67c68f6ccba60c52a7a8a8faa6a23
   react-native-restart: fff228304625f55de2ebd4de43938110f4c888ed
+  react-native-safe-area-context: e22a8ca00f758273d2408953965cb8db67da7925
   react-native-slider: 884693dd50f84745baa511ecdcde4c16f32182fb
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
   React-RCTActionSheet: 600b4d10e3aea0913b5a92256d2719c0cdd26d76
@@ -662,18 +683,21 @@ SPEC CHECKSUMS:
   RemobileReactNativeQrcodeLocalImage: 57aadc12896b148fb5e04bc7c6805f3565f5c3fa
   RNCAsyncStorage: 453cd7c335ec9ba3b877e27d02238956b76f3268
   RNCClipboard: 8148e21ac347c51fd6cd4b683389094c216bb543
+  RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f
   RNDefaultPreference: 628cb35719f2fe4111c000ccfa7e186400bbc47e
   RNDeviceInfo: 722dc13c269b9dbf305aa4b790d36731602e99b7
   RNFastImage: 35ae972d6727c84ee3f5c6897e07f84d0a3445e9
   RNFBAnalytics: faa7f3d312854c5e4e952a9a4b4cecf3fdb69885
   RNFBApp: 25a6476dfd7aac2bcbe984f569875bcea122895b
   RNFBCrashlytics: e5c49721cac180f72c89ea67cc13a614b9fcecc4
   RNFS: c9bbde46b0d59619f8e7b735991c60e0f73d22c1
-  RNGestureHandler: 911d3b110a7a233a34c4f800e7188a84b75319c6
+  RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
   RNHandoff: d3b0754cca3a6bcd9b25f544f733f7f033ccf5fa
   RNLocalize: b6df30cc25ae736d37874f9bce13351db2f56796
   RNQuickAction: eca9a5dd04b5cdf8a0dd32d8be8844dc33aba2bd
   RNRate: 29be49c24b314c4e8ec09d848c3965f61cb0be47
+  RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43
+  RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da
   RNSecureKeyStore: f1ad870e53806453039f650720d2845c678d89c8
   RNSentry: 2803ba8c8129dcf26b79e9b4d8c80168be6e4390
   RNShare: 8b171d4b43c1d886917fdd303bf7a4b87167b05c
@@ -689,4 +713,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 10567d1e173aae9ab5e898db3c41267100a01a22
 
-COCOAPODS: 1.9.3
+COCOAPODS: 1.9.2

loc/en.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: 'Dashboard',
     settings: 'Settings',
+    addressBook: 'Address book',
   },
   message: {
     somethingWentWrong: 'Something went wrong',
@@ -300,7 +301,6 @@ module.exports = {
   contactList: {
     cancel: 'Cancel',
     search: 'Search',
-    bottomNavigationLabel: 'Address book',
     screenTitle: 'Address book',
     noContacts: 'No contacts',
     noContactsDesc1: 'No contacts to show. \n Click',

loc/es.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: 'Panel',
     settings: 'Configuración',
+    addressBook: 'Libreta de direcciones',
   },
   message: {
     somethingWentWrong: 'Algo salió mal',
@@ -286,7 +287,6 @@ module.exports = {
   contactList: {
     cancel: 'Cancelar',
     search: 'Buscar',
-    bottomNavigationLabel: 'Libreta de direcciones',
     screenTitle: 'Libreta de direcciones',
     noContacts: 'No hay contactos',
     noContactsDesc1: 'No hay contactos para mostrar.\nHaga clic',

loc/id_ID.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: 'Dasbor',
     settings: 'Pengaturan',
+    addressBook: 'Buku alamat',
   },
   message: {
     somethingWentWrong: 'Terjadi kesalahan',
@@ -285,7 +286,6 @@ module.exports = {
   contactList: {
     cancel: 'Batal',
     search: 'Cari',
-    bottomNavigationLabel: 'Buku alamat',
     screenTitle: 'Buku alamat',
     noContacts: 'Tidak ada kontak',
     noContactsDesc1: 'Tidak ada kontak untuk ditampilkan. \nKlik',

loc/jp_JP.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: 'ダッシュボード',
     settings: '設定',
+    addressBook: 'アドレス帳',
   },
   message: {
     somethingWentWrong: '問題が発生しました',
@@ -276,7 +277,6 @@ module.exports = {
   contactList: {
     cancel: 'キャンセル',
     search: '検索',
-    bottomNavigationLabel: 'アドレス帳',
     screenTitle: 'アドレス帳',
     noContacts: '連絡先がありません',
     noContactsDesc1: '表示する連絡先がありません。 \nクリックして、',

loc/ko_KR.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: '대시보드',
     settings: '설정',
+    addressBook: '주소록',
   },
   message: {
     somethingWentWrong: '문제가 발생했습니다',
@@ -276,7 +277,6 @@ module.exports = {
   contactList: {
     cancel: '취소',
     search: '검색하기',
-    bottomNavigationLabel: '주소록',
     screenTitle: '주소록',
     noContacts: '연락처 없음',
     noContactsDesc1: '표시할 연락처가 없습니다. \n클릭해서',

loc/pt_PT.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: 'Menu Principal',
     settings: 'Definições',
+    addressBook: 'Lista de endereços',
   },
   message: {
     somethingWentWrong: 'Alguma coisa correu mal',
@@ -287,7 +288,6 @@ module.exports = {
   contactList: {
     cancel: 'Cancelar',
     search: 'Pesquisar',
-    bottomNavigationLabel: 'Lista de endereços',
     screenTitle: 'Lista de endereços',
     noContacts: 'Sem contactos',
     noContactsDesc1: 'Sem contactos para apresentar. \nClicar',

loc/tr_TR.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: 'Pano',
     settings: 'Ayarlar',
+    addressBook: 'Adres Defteri',
   },
   message: {
     somethingWentWrong: 'Bir sorun meydana geldi',
@@ -284,7 +285,6 @@ module.exports = {
   contactList: {
     cancel: 'İptal Et',
     search: 'Ara',
-    bottomNavigationLabel: 'Adres Defteri',
     screenTitle: 'Adres Defteri',
     noContacts: 'Kişi yok',
     noContactsDesc1: 'Gösterilecek kişi yok. \nTıkla',

loc/vi_VN.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: 'Bảng điều khiển',
     settings: 'Cài đặt',
+    addressBook: 'Sổ địa chỉ',
   },
   message: {
     somethingWentWrong: 'Đã xảy ra lỗi',
@@ -286,7 +287,6 @@ module.exports = {
   contactList: {
     cancel: 'Hủy',
     search: 'Tìm kiếm',
-    bottomNavigationLabel: 'Sổ địa chỉ',
     screenTitle: 'Sổ địa chỉ',
     noContacts: 'Không có thông tin liên lạc',
     noContactsDesc1: 'Không có thông tin liên lạc nào. \nNhấp vào',

loc/zh_cn.js

@@ -17,6 +17,7 @@ module.exports = {
   tabNavigator: {
     dashboard: '仪表盘',
     settings: '设置',
+    addressBook: '地址簿',
   },
   message: {
     somethingWentWrong: '出问题了',
@@ -267,7 +268,6 @@ module.exports = {
   contactList: {
     cancel: '取消',
     search: '查询',
-    bottomNavigationLabel: '地址簿',
     screenTitle: '地址簿',
     noContacts: '无联系人',
     noContactsDesc1: '无联系人可展示。 \n点击',

package.json

@@ -72,10 +72,14 @@
     "@react-native-community/async-storage": "1.9.0",
     "@react-native-community/blur": "3.3.1",
     "@react-native-community/clipboard": "^1.2.2",
+    "@react-native-community/masked-view": "^0.1.10",
     "@react-native-community/slider": "2.0.0-rc.1",
     "@react-native-firebase/analytics": "^7.1.0",
     "@react-native-firebase/app": "^7.1.0",
     "@react-native-firebase/crashlytics": "^7.1.0",
+    "@react-navigation/bottom-tabs": "^5.6.0",
+    "@react-navigation/native": "^5.6.1",
+    "@react-navigation/stack": "^5.6.1",
     "@remobile/react-native-qrcode-local-image": "git+https://github.com/BlueWallet/react-native-qrcode-local-image.git",
     "@sentry/react-native": "1.0.9",
     "@types/react-native-calendars": "^1.20.7",
@@ -118,7 +122,7 @@
     "react-native-fast-image": "^8.1.5",
     "react-native-flexi-radio-button": "0.2.2",
     "react-native-fs": "2.13.3",
-    "react-native-gesture-handler": "1.5.6",
+    "react-native-gesture-handler": "^1.6.1",
     "react-native-handoff": "git+https://github.com/marcosrdz/react-native-handoff.git",
     "react-native-haptic-feedback": "1.7.1",
     "react-native-image-picker": "1.1.0",
@@ -135,7 +139,10 @@
     "react-native-quick-actions": "0.3.12",
     "react-native-randombytes": "3.5.3",
     "react-native-rate": "1.1.7",
+    "react-native-reanimated": "^1.9.0",
     "react-native-restart": "^0.0.15",
+    "react-native-safe-area-context": "^3.0.6",
+    "react-native-screens": "^2.9.0",
     "react-native-secure-key-store": "^2.0.7",
     "react-native-share": "2.0.0",
     "react-native-snap-carousel": "3.8.4",
@@ -146,8 +153,6 @@
     "react-native-tooltip": "git+https://github.com/marcosrdz/react-native-tooltip.git",
     "react-native-vector-icons": "6.6.0",
     "react-native-watch-connectivity": "0.4.1",
-    "react-navigation": "3.11.0",
-    "react-navigation-hooks": "1.1.0",
     "react-redux": "^7.2.0",
     "react-test-renderer": "16.9.0",
     "readable-stream": "3.4.0",

src/assets/index.tsx

@@ -1,10 +1,10 @@
 export const images = {
-  dashboard: require('./images/dashboard.png'),
-  dashboardInactive: require('./images/dashboardInactive.png'),
-  addressBook: require('./images/addressBook.png'),
-  addressBookInactive: require('./images/addressBookInactive.png'),
-  settings: require('./images/settings.png'),
-  settingsInactive: require('./images/settingsInactive.png'),
+  Dashboard: require('./images/dashboard.png'),
+  DashboardInactive: require('./images/dashboardInactive.png'),
+  ContactList: require('./images/addressBook.png'),
+  ContactListInactive: require('./images/addressBookInactive.png'),
+  Settings: require('./images/settings.png'),
+  SettingsInactive: require('./images/settingsInactive.png'),
   success: require('./images/bvWalletIconSuccess.png'),
   dashboardNoWallet: require('./images/bvWalletIconNoCards.png'),
   addressBookNoContacts: require('./images/addressBookNoContacts.png'),