Rework and update react-navigation

android/app/build.gradle

@@ -296,6 +296,10 @@ dependencies {
       implementation jscFlavor
     }
 
+    // react-native-screens
+    implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
+    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
+
     implementation 'androidx.multidex:multidex:2.0.1' // only needed if minSdkVersion is less than 21 (https://developer.android.com/studio/build/multidex)
     implementation project(':react-native-dialogs')
     // Force using exact RN version instead of relying on gradle dependency resolution

clj-rn.conf.edn

@@ -34,8 +34,10 @@
               "react-native/Libraries/vendor/emitter/EventEmitter"
               "react-native-background-timer"
               "react-native-fetch-polyfill"
-              "react-navigation"
-              "react-native-navigation-twopane"
+              "@react-navigation/native"
+              "@react-navigation/stack"
+              "@react-navigation/bottom-tabs"
+              ;; "react-native-navigation-twopane"
               "hi-base32"
               "functional-red-black-tree"
               "react-native-mail"
@@ -74,9 +76,8 @@
                    "react-native-desktop-notification"
                    "react-native-desktop-gesture-handler"
                    "web3-utils"
-                   "react-navigation"
                    "functional-red-black-tree"
-                   "react-native-navigation-twopane"
+                   ;; "react-native-navigation-twopane"
                    "hi-base32"]
 
  ;; Resoures

components/src/status_im/ui/components/react.cljs

@@ -246,10 +246,9 @@
 ;; KeyboardAvoidingView
 
 (defn keyboard-avoiding-view [props & children]
-  (let [view-element (if platform/ios?
-                       [keyboard-avoiding-view-class (merge {:behavior :padding} props)]
-                       [view props])]
-    (vec (concat view-element children))))
+  (into [keyboard-avoiding-view-class
+         (merge (when platform/ios? {:behavior :padding}) props)]
+        children))
 
 (defn scroll-view [props & children]
   (vec (conj children props scroll-view-class)))
@@ -271,51 +270,7 @@
            [activity-indicator {:animating true}]])
       comp)))
 
-(defn navigation-wrapper
-  "Wraps component so that it will be shown only when current-screen is one of views"
-  [{:keys [component views current-view hide?]
-    :or   {hide? false}}]
-  (let [current-view? (if (set? views)
-                        (views current-view)
-                        (= views current-view))
-
-        style (if current-view?
-                {:flex   1
-                 :zIndex 0}
-                {:opacity 0
-                 :flex    0
-                 :zIndex -1})
-
-        component' (if (fn? component) [component] component)]
-
-    (when (or (not hide?) (and hide? current-view?))
-      (if hide?
-        component'
-        [view style (if (fn? component) [component] component)]))))
-
-(defn with-empty-preview [comp]
-  [with-activity-indicator
-   {:preview [view {}]}
-   comp])
-
 (def safe-area-provider (adapt-class (object/get js-dependencies/safe-area-context "SafeAreaProvider")))
 (def safe-area-consumer (adapt-class (object/get js-dependencies/safe-area-context "SafeAreaConsumer")))
 
-(defn create-main-screen-view [current-view]
-  (fn [props & children]
-    (apply
-     vector
-     (adapt-class (object/get js-dependencies/safe-area-context "SafeAreaView"))
-     (cond-> props
-       (= current-view :qr-scanner)
-       (assoc :background-color :black))
-     children)))
-
-(defn main-screen-modal-view [current-view & components]
-  [(create-main-screen-view current-view)
-   styles/flex
-   [keyboard-avoiding-view
-    (merge {:flex 1 :flex-direction :column}
-           (when platform/android?
-             {:background-color :white}))
-    (apply vector view styles/flex components)]])
+(def safe-area-view (adapt-class (object/get js-dependencies/safe-area-context "SafeAreaView")))

deps.edn

@@ -8,12 +8,12 @@
                                       :sha           "b0d3b0f016f217c6a397a54e5eba9486471fb172"
                                       :deps/manifest :deps}
          com.andrewmcveigh/cljs-time {:mvn/version "0.5.2"}
+         binaryage/oops              {:mvn/version "0.7.0"}
          status-im/timbre            {:mvn/version "4.10.0-2-status"}
          com.taoensso/encore         {:mvn/version "2.94.0"}
          hickory                     {:mvn/version "0.7.1"}
          cljs-bean                   {:mvn/version "1.3.0"}
-         mvxcvi/alphabase            {:mvn/version "1.0.0"}
-         rasom/cljs-react-navigation {:mvn/version "0.1.4"}}
+         mvxcvi/alphabase            {:mvn/version "1.0.0"}}
 
  :aliases
  {:dev {:extra-deps

ios/Podfile.lock

@@ -244,9 +244,11 @@ PODS:
     - React-cxxreact (= 0.61.5)
     - React-jsi (= 0.61.5)
     - ReactCommon/jscallinvoker (= 0.61.5)
+  - RNCMaskedView (0.1.6):
+    - React
   - RNFS (2.14.1):
     - React
-  - RNGestureHandler (1.5.2):
+  - RNGestureHandler (1.5.3):
     - React
   - RNImageCropPicker (0.25.3):
     - QBImagePickerController
@@ -257,7 +259,9 @@ PODS:
     - React
   - RNLanguages (3.0.2):
     - React
-  - RNScreens (1.0.0-alpha.23):
+  - RNReanimated (1.7.0):
+    - React
+  - RNScreens (2.0.0-alpha.25):
     - React
   - RNSVG (9.11.1):
     - React
@@ -310,11 +314,13 @@ DEPENDENCIES:
   - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
   - ReactCommon/jscallinvoker (from `../node_modules/react-native/ReactCommon`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - RNFS (from `../node_modules/react-native-fs`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNImageCropPicker (from `../node_modules/react-native-image-crop-picker`)
   - RNKeychain (from `../node_modules/react-native-keychain`)
   - RNLanguages (from `../node_modules/react-native-languages`)
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - SQLCipher (~> 3.0)
@@ -399,6 +405,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/Libraries/Vibration"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNCMaskedView:
+    :path: "../node_modules/@react-native-community/masked-view"
   RNFS:
     :path: "../node_modules/react-native-fs"
   RNGestureHandler:
@@ -409,6 +417,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-keychain"
   RNLanguages:
     :path: "../node_modules/react-native-languages"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSVG:
@@ -455,12 +465,14 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
+  RNCMaskedView: a88953beefbd347a29072d9eba90e42945fe291e
   RNFS: a8fbe7060fa49157d819466404794ad9c58e58cf
-  RNGestureHandler: 946a7691e41df61e2c4b1884deab41a4cdc3afff
+  RNGestureHandler: 02905abe54e1f6e59c081a10b4bd689721e17aa6
   RNImageCropPicker: bfb3ea9c8622f290532e2fe63f369e0d5a52f597
   RNKeychain: 216f37338fcb9e5c3a2530f1e3295f737a690cb1
   RNLanguages: 962e562af0d34ab1958d89bcfdb64fafc37c513e
-  RNScreens: f28b48b8345f2f5f39ed6195518291515032a788
+  RNReanimated: 031fe8d9ea93c2bd689a40f05320ef9d96f74d7f
+  RNScreens: 031d10e2b648afc9546f16b6a786d2efc6870310
   RNSVG: be27aa7c58819f97399388ae53d7fa0572f32c7f
   RSKImageCropper: a446db0e8444a036b34f3c43db01b2373baa4b2a
   SQLCipher: f9fcf29b2e59ced7defc2a2bdd0ebe79b40d4990

mobile/js_files/package.json

@@ -6,7 +6,11 @@
     "start": "react-native start"
   },
   "dependencies": {
+    "@react-native-community/masked-view": "^0.1.6",
     "@react-native-community/netinfo": "^4.4.0",
+    "@react-navigation/bottom-tabs": "^5.1.1",
+    "@react-navigation/native": "^5.0.9",
+    "@react-navigation/stack": "^5.1.1",
     "bignumber.js": "git+https://github.com/status-im/bignumber.js.git#v4.0.2-status",
     "buffer": "^5.4.2",
     "chance": "^1.1.0",
@@ -27,23 +31,23 @@
     "react-native-dialogs": "^1.0.4",
     "react-native-fetch-polyfill": "^1.1.2",
     "react-native-fs": "^2.14.1",
-    "react-native-gesture-handler": "^1.3.0",
+    "react-native-gesture-handler": "^1.5.3",
     "react-native-image-crop-picker": "^0.25.0",
     "react-native-image-resizer": "git+https://github.com/status-im/react-native-image-resizer.git#1.0.0-1-status",
     "react-native-keychain": "git+https://github.com/status-im/react-native-keychain.git#v.3.0.0-status",
     "react-native-languages": "^3.0.2",
     "react-native-mail": "git+https://github.com/status-im/react-native-mail.git#v4.0.0-status",
     "react-native-navigation-twopane": "git+https://github.com/status-im/react-native-navigation-twopane.git#v0.0.2-status",
-    "react-native-safe-area-context": "^0.6.0",
-    "react-native-screens": "^1.0.0-alpha.23",
+    "react-native-reanimated": "^1.7.0",
+    "react-native-safe-area-context": "^0.7.3",
+    "react-native-screens": "^2.0.0-alpha.25",
     "react-native-shake": "^3.3.1",
     "react-native-splash-screen": "^3.2.0",
     "react-native-status-keycard": "git+https://github.com/status-im/react-native-status-keycard.git#v2.5.20",
     "react-native-svg": "^9.8.4",
     "react-native-touch-id": "^4.4.1",
     "react-native-webview": "^6.11.1",
     "react-native-webview-bridge": "git+https://github.com/status-im/react-native-webview-bridge.git#fix/community-webview",
-    "react-navigation": "^3.11.0",
     "web3-utils": "^1.2.1"
   },
   "devDependencies": {