Inital code

src/mocks/js_dependencies.cljs

@@ -47,6 +47,7 @@
                                        :ValueXY                 (fn [])
                                        :View                    {}
                                        :FlatList                {}
+                                       :Image                   {}
                                        :ScrollView              {}
                                        :Text                    {}}
             :Easing                   {:bezier (fn [])

src/quo/react_native.cljs

@@ -74,6 +74,9 @@
 (def animated-view
   (reagent/adapt-react-class (.-View ^js animated)))
 
+(def animated-image-view
+  (reagent/adapt-react-class (.-Image ^js animated)))
+
 (def ui-manager  (.-UIManager ^js rn))
 
 (def layout-animation (.-LayoutAnimation ^js rn))
@@ -102,6 +105,8 @@
                                                               :property (:opacity layout-animation-properties)}
                                                :delete   #js {:type     (:ease-in-ease-out layout-animation-types)
                                                               :property (:opacity layout-animation-properties)}}})
+(defonce enable-layout-animations
+  (when platform/android? (.setLayoutAnimationEnabledExperimental ^js ui-manager true)))
 
 (def activity-indicator (reagent/adapt-react-class (.-ActivityIndicator ^js rn)))
 

src/quo2/components/button.cljs

@@ -105,7 +105,7 @@
   [_ _]
   (let [pressed (reagent/atom false)]
     (fn [{:keys [on-press disabled type size before after above width
-                 on-long-press accessibility-label icon]
+                 on-long-press accessibility-label icon style]
           :or   {type :primary
                  size 40}}
          children]
@@ -126,17 +126,19 @@
                                               {:on-press-out (fn []
                                                                (reset! pressed nil))})
 
-         [rn/view {:style (style-container
-                           type
-                           size
-                           disabled
-                           (get background-color state)
-                           (get border-color state)
-                           icon
-                           above
-                           width
-                           before
-                           after)}
+         [rn/view {:style (merge
+                           (style-container
+                            type
+                            size
+                            disabled
+                            (get background-color state)
+                            (get border-color state)
+                            icon
+                            above
+                            width
+                            before
+                            after)
+                           style)}
           (when above
             [rn/view
              [quo2.icons/icon above {:container-style {:margin-bottom 2}
@@ -168,4 +170,4 @@
              [quo2.icons/icon after {:container-style {:margin-left  4
                                                        :margin-right (if (= size 40) 12 8)}
                                      :color           icon-color
-                                     :size            icon-size}]])]]))))
+                                     :size            icon-size}]])]]))))

src/quo2/components/text.cljs

@@ -29,5 +29,6 @@
   (let [this (reagent/current-component)
         props (reagent/props this)
         style (text-style props)]
-    (into [rn/text {:style style}]
-          (reagent/children this))))
+    (into [rn/text (merge {:style style}
+                          (dissoc props :style :size :align :weight :color))]
+          (reagent/children this))))

src/quo2/foundations/colors.cljs

@@ -34,6 +34,13 @@
 (def neutral-50-opa-30 (alpha neutral-50 0.3))
 (def neutral-50-opa-40 (alpha neutral-50 0.4))
 
+;;70 with transparency
+(def neutral-70-opa-60 (alpha neutral-70 0.6))
+(def neutral-70-opa-70 (alpha neutral-70 0.7))
+(def neutral-70-opa-80 (alpha neutral-70 0.8))
+(def neutral-70-opa-90 (alpha neutral-70 0.9))
+(def neutral-70-opa-95 (alpha neutral-70 0.95))
+
 ;;80 with transparency
 (def neutral-80-opa-60 (alpha neutral-80 0.6))
 (def neutral-80-opa-70 (alpha neutral-80 0.7))
@@ -176,5 +183,15 @@
 (def info-50-opa-30 (alpha info-50 0.3))
 (def info-50-opa-40 (alpha info-50 0.4))
 
+;;;;Switcher
+(def switcher-background "#040B14")
+
+;;switcher-screen with transparency
+(def switcher-background-opa-60 (alpha switcher-background 0.6))
+(def switcher-background-opa-70 (alpha switcher-background 0.7))
+(def switcher-background-opa-80 (alpha switcher-background 0.8))
+(def switcher-background-opa-90 (alpha switcher-background 0.9))
+(def switcher-background-opa-95 (alpha switcher-background 0.95))
+
 (defn theme-colors [light dark]
-  (if (theme/dark?) dark light))
+  (if (theme/dark?) dark light))

src/quo2/screens/main.cljs

@@ -58,7 +58,7 @@
    [rn/view
     (for [{:keys [name]} screens]
       ^{:key name}
-      [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to name])}
+      [rn/touchable-opacity {:on-press #(re-frame/dispatch [:navigate-to-nav2 name])}
        [rn/view {:style {:padding-vertical 8}}
         [quo/text (str "Preview " name)]]])]])
 

src/status_im/chat/models.cljs

@@ -10,6 +10,7 @@
             [quo.design-system.colors :as colors]
             [status-im.constants :as constants]
             [status-im.navigation :as navigation]
+            [status-im.navigation2 :as navigation2]
             [status-im.utils.clocks :as utils.clocks]
             [status-im.utils.fx :as fx]
             [status-im.utils.utils :as utils]
@@ -259,6 +260,15 @@
                  (navigation/pop-to-root-tab % :chat-stack))
               (navigation/navigate-to-cofx :chat nil))))
 
+(fx/defn navigate-to-chat-nav2
+  "Takes coeffects map and chat-id, returns effects necessary for navigation and preloading data"
+  {:events [:chat.ui/navigate-to-chat-nav2]}
+  [{db :db :as cofx} chat-id from-switcher?]
+  (fx/merge cofx
+            {:db (assoc db :current-chat-id chat-id)}
+            (preload-chat-data chat-id)
+            (navigation2/navigate-to-nav2 :chat chat-id nil from-switcher?)))
+
 (fx/defn handle-clear-history-response
   {:events [::history-cleared]}
   [{:keys [db]} chat-id response]

src/status_im/events.cljs

@@ -63,7 +63,9 @@
             [status-im.multiaccounts.login.core :as login.core]
             [status-im.signing.core :as signing]
             status-im.wallet-connect.core
-            status-im.wallet-connect-legacy.core))
+            status-im.wallet-connect-legacy.core
+            status-im.navigation2
+            status-im.navigation2.core))
 
 (re-frame/reg-fx
  :dismiss-keyboard

src/status_im/navigation2.cljs

@@ -0,0 +1,49 @@
+(ns status-im.navigation2
+  (:require [status-im.utils.fx :as fx]
+            [status-im.utils.datetime :as datetime]))
+
+(def parent-stack (atom :home-stack))
+
+(fx/defn init-root-nav2
+  {:events [:init-root-nav2]}
+  [_ root-id]
+  {:init-root-fx-nav2 root-id})
+
+(fx/defn open-modal-nav2
+  {:events [:open-modal-nav2]}
+  [_ modal]
+  {:open-modal-fx-nav2 modal})
+
+(fx/defn close-modal-nav2
+  {:events [:close-modal-nav2]}
+  [_ modal]
+  {:close-modal-fx-nav2 modal})
+
+(defn navigate-from-home-stack [go-to-view-id id db]
+  (reset! parent-stack go-to-view-id)
+  {:navigate-to-fx-nav2 [go-to-view-id id]
+   :db (assoc-in db [:navigation2/navigation2-stacks id] {:type  go-to-view-id
+                                                          :id    id
+                                                          :clock (datetime/timestamp)})})
+
+(defn navigate-from-switcher [go-to-view-id id db from-home?]
+  (reset! parent-stack go-to-view-id)
+  {:navigate-from-switcher-fx [go-to-view-id id from-home?]
+   :db (assoc-in db [:navigation2/navigation2-stacks id] {:type  go-to-view-id
+                                                          :id    id
+                                                          :clock (datetime/timestamp)})})
+
+(fx/defn navigate-to-nav2
+  {:events [:navigate-to-nav2]}
+  [{:keys [db] :as cofx} go-to-view-id id screen-params from-switcher?]
+  (let [view-id     (:view-id db)
+        stacks      (:navigation2/navigation2-stacks db)
+        from-home?  (= view-id :home-stack)]
+    (if from-switcher?
+      (navigate-from-switcher go-to-view-id id db from-home?)
+      (if from-home?
+        (navigate-from-home-stack go-to-view-id id db)
+        ;; TODO(parvesh) - new stacks created from other screens should be stacked on current stack, instead of creating new entry
+        (navigate-from-home-stack go-to-view-id id db)))))
+
+

src/status_im/navigation2/core.cljs

@@ -0,0 +1,77 @@
+(ns status-im.navigation2.core
+  (:require [re-frame.core :as re-frame]
+            [status-im.ui.screens.views :as views]
+            [status-im.navigation2.utils :as nav2-utils]
+            [status-im.navigation2.roots :as roots]
+            [status-im.navigation.roots :as nav-roots]
+            ["react-native-navigation" :refer (Navigation)]))
+
+(def tab-key-idx {:home        0
+                  :communities 1
+                  :wallet      2
+                  :browser     3})
+
+(defonce set-navigation-default-options
+  (.setDefaultOptions Navigation (clj->js {:options {:topBar {:visible false}}})))
+
+;; TODO (parvesh) - improve open-modal and close-modal
+(defn open-modal [comp]
+  (.showModal Navigation
+              (clj->js {:stack {:children
+                                [{:component
+                                  {:name      comp
+                                   :id        comp
+                                   :options   {:topBar {:visible false}}}}]}})))
+
+(defn close-modal [_])
+
+(defn close-all-modals []
+  (.dismissAllModals Navigation))
+
+(defn get-id [comp id]
+  (str comp "-" id))
+
+(defn get-options [show-topbar? options]
+  (if show-topbar?
+    (merge options
+           (nav-roots/status-bar-options)
+           (nav-roots/merge-top-bar (nav-roots/topbar-options) options))
+    {:topBar {:visible false}}))
+
+(defn change-stack-root [[comp _]]
+  (let [{:keys [options]} (get views/screens comp)]
+    (.setStackRoot Navigation
+                   (name comp)
+                   (clj->js {:stack {:id       comp
+                                     :children [{:component {:id      comp
+                                                             :name    comp
+                                                             :options (get-options false options)}}]}}))))
+
+(defn navigate [[comp _]]
+  (let [{:keys [options]} (get views/screens comp)]
+    (reset! nav2-utils/container-stack-view-id comp)
+    (.push Navigation
+           (name :home-stack)
+           (clj->js {:stack {:id       comp
+                             :children [{:component {:id      comp
+                                                     :name    comp
+                                                     :options (get-options false options)}}]}}))))
+
+(defn navigate-from-switcher [[comp id from-home?]]
+  (if from-home?
+    (navigate [comp id])
+    (change-stack-root [comp id])))
+
+(re-frame/reg-fx
+ :init-root-fx-nav2
+ (fn [new-root-id]
+   (reset! nav2-utils/container-stack-view-id new-root-id)
+   (.setRoot Navigation (clj->js (get (roots/roots) new-root-id)))))
+
+(re-frame/reg-fx :open-modal-fx-nav2 open-modal)
+
+(re-frame/reg-fx :close-modal-fx-nav2 close-modal)
+
+(re-frame/reg-fx :navigate-to-fx-nav2 navigate)
+
+(re-frame/reg-fx :navigate-from-switcher-fx navigate-from-switcher)

src/status_im/navigation2/home_stack.cljs

@@ -0,0 +1,27 @@
+(ns status-im.navigation2.home-stack
+  (:require [quo.react-native :as rn]
+            [quo2.screens.main :as quo2.preview]
+            [status-im.switcher.switcher :as switcher]
+            [status-im.ui.screens.home.views :as home]
+            [status-im.switcher.constants :as switcher-constants]
+            [status-im.ui.screens.browser.empty-tab.views :as empty-tab]
+            [status-im.ui.screens.wallet.accounts.views :as wallet.accounts]
+            [status-im.switcher.bottom-tabs :as bottom-tabs]))
+
+;; TODO(parvesh) - improve stack changing performance (load all stacks at once)
+(defn stack-view []
+  (let [{:keys [width height]} (switcher-constants/dimensions)]
+       ;; bottom-tabs-height     (switcher-constants/bottom-tabs-height)]
+    [rn/view {:style {:width  width
+                      :height (- height 80)}} ;; TODO(parvesh) - add height for ios
+     (case @bottom-tabs/selected-tab-id
+       :chats-stack       [home/home]
+       :communities-stack [quo2.preview/main-screen]
+       :wallet-stack      [wallet.accounts/accounts-overview]
+       :browser-stack     [empty-tab/empty-tab])]))
+
+(defn home []
+  [:<>
+   [stack-view]
+   [bottom-tabs/bottom-tabs]
+   [switcher/switcher :home-stack]])

src/status_im/navigation2/roots.cljs

@@ -0,0 +1,9 @@
+(ns status-im.navigation2.roots)
+
+(defn roots []
+  {:home-stack
+   {:root
+    {:stack {:id       :home-stack
+             :children [{:component {:name    :home-stack
+                                     :id      :home-stack
+                                     :options {:topBar {:visible false}}}}]}}}})

src/status_im/navigation2/screens.cljs

@@ -0,0 +1,6 @@
+(ns status-im.navigation2.screens
+  (:require [status-im.navigation2.home-stack :as home-stack]))
+
+(def screens [{:name      :home-stack
+               :insets    {:top false}
+               :component home-stack/home}])

src/status_im/navigation2/stack_with_switcher.cljs

@@ -0,0 +1,7 @@
+(ns status-im.navigation2.stack-with-switcher
+  (:require [status-im.switcher.switcher :as switcher]))
+
+(defn overlap-stack [comp view-id]
+  [:<>
+   [comp]
+   [switcher/switcher view-id]])

src/status_im/navigation2/utils.cljs

@@ -0,0 +1,3 @@
+(ns status-im.navigation2.utils)
+
+(defonce container-stack-view-id (atom nil))

src/status_im/subs.cljs

@@ -87,6 +87,7 @@
 (reg-root-key-sub :home-items-show-number :home-items-show-number)
 (reg-root-key-sub :waku/v2-peer-stats :peer-stats)
 (reg-root-key-sub :visibility-status-updates :visibility-status-updates)
+(reg-root-key-sub :navigation2/navigation2-stacks :navigation2/navigation2-stacks)
 
 ;;NOTE this one is not related to ethereum network
 ;; it is about cellular network/ wifi network
@@ -2957,3 +2958,19 @@
  :<- [:bookmarks]
  (fn [bookmarks]
    (into {} (remove #(:removed (second %)) bookmarks))))
+
+;; NAVIGATION2
+
+
+(re-frame/reg-sub
+ :navigation2/switcher-cards
+ :<- [:navigation2/navigation2-stacks]
+ (fn [stacks [_ toggle-switcher-screen]]
+   (sort-by :clock >
+            (reduce (fn [acc stack-vector]
+                      (let [{:keys [type clock id]} (get stack-vector 1)]
+                        (conj acc {:type  type
+                                   :clock clock
+                                   :id    id
+                                   :toggle-switcher-screen toggle-switcher-screen})))
+                    '() stacks))))