🧈 Transparent modal support 🧈 (#15268)

src/react_native/navigation.cljs

@@ -73,3 +73,15 @@
 (defn merge-options
   [id opts]
   (.mergeOptions Navigation id (clj->js opts)))
+
+(def constants (atom nil))
+
+(defn status-bar-height
+  []
+  (:status-bar-height @constants))
+
+(.then (.constants Navigation)
+       (fn [^js consts]
+         (reset! constants {:top-bar-height     (.-topBarHeight consts)
+                            :bottom-tabs-height (.-bottomTabsHeight consts)
+                            :status-bar-height  (.-statusBarHeight consts)})))

src/status_im2/contexts/activity_center/events.cljs

@@ -10,7 +10,8 @@
             [taoensso.timbre :as log]
             [utils.collection :as collection]
             [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [status-im2.navigation.events :as navigation]))
 
 (def defaults
   {:filter-status          :unread
@@ -24,26 +25,15 @@
 
 (rf/defn open-activity-center
   {:events [:activity-center/open]}
-  [{:keys [db]} {:keys [filter-type filter-status]}]
+  [{:keys [db] :as cofx} {:keys [filter-type filter-status]}]
-  ;; It's essential to clean-up the popover state and delay the dispatch of the
+  (rf/merge cofx
-  ;; `:show-popover` event, otherwise the popover won't be displayed under
+            {:db (cond-> db
-  ;; certain conditions. See issue
-  ;; https://github.com/status-im/status-mobile/issues/15230
-  {:db             (cond-> (dissoc db :popover/popover)
                    filter-status
                    (assoc-in [:activity-center :filter :status] filter-status)
 
                    filter-type
-                     (assoc-in [:activity-center :filter :type] filter-type))
+                   (assoc-in [:activity-center :filter :type] filter-type))}
-   :dispatch-later [{:ms       25
+            (navigation/open-modal :activity-center {})))
-                     :dispatch [:show-popover
-                                {:view                       :activity-center
-                                 :style                      {:margin 0}
-                                 :disable-touchable-overlay? true
-                                 :delay-ms                   225
-                                 :blur-view?                 true
-                                 :blur-view-props            {:blur-amount 20
-                                                              :blur-type   :dark}}]}]})
 
 ;;;; Misc
 

src/status_im2/contexts/activity_center/style.cljs

@@ -7,20 +7,13 @@
   {:flex-direction     :row
    :justify-content    :space-between
    :padding-horizontal screen-padding
-   :margin-bottom      12})
+   :margin-vertical    12})
 
 (def header-heading
   {:padding-horizontal screen-padding
    :padding-vertical   12
    :color              colors/white})
 
-(defn screen-container
-  [window-width top bottom]
-  {:flex           1
-   :width          window-width
-   :padding-top    (if (pos? top) (+ top 12) 12)
-   :padding-bottom bottom})
-
 (defn notification-container
   [index]
   {:margin-top         (if (zero? index) 0 4)
@@ -60,3 +53,8 @@
    :height           120
    :background-color colors/danger-50
    :margin-bottom    20})
+
+(def blur
+  {:style        {:position :absolute :top 0 :left 0 :right 0 :bottom 0}
+   :overlayColor colors/neutral-80-opa-80
+   :blur-amount  20})

src/status_im2/contexts/activity_center/view.cljs

@@ -3,7 +3,6 @@
             [quo2.core :as quo]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
-            [react-native.safe-area :as safe-area]
             [status-im2.contexts.activity-center.notification-types :as types]
             [status-im2.contexts.activity-center.notification.admin.view :as admin]
             [status-im2.contexts.activity-center.notification.contact-requests.view :as contact-requests]
@@ -14,7 +13,9 @@
             [status-im2.contexts.activity-center.notification.reply.view :as reply]
             [status-im2.contexts.activity-center.style :as style]
             [utils.i18n :as i18n]
-            [utils.re-frame :as rf]))
+            [utils.re-frame :as rf]
+            [react-native.blur :as blur]
+            [react-native.navigation :as navigation]))
 
 (defn filter-selector-read-toggle
   []
@@ -134,7 +135,7 @@
                                                     (contains? types-with-unread types/system))}]}]))
 
 (defn header
-  [request-close]
+  []
   [rn/view
    [rn/view {:style style/header-container}
     [quo/button
@@ -143,7 +144,7 @@
       :size                32
       :accessibility-label :close-activity-center
       :override-theme      :dark
-      :on-press            request-close}
+      :on-press            #(rf/dispatch [:navigate-back])}
      :i/close]
     [quo/button
      {:icon                true
@@ -202,17 +203,14 @@
            nil)]))))
 
 (defn view
-  [request-close]
+  []
   (let [active-swipeable (atom nil)]
-    [:f>
+    (rf/dispatch [:activity-center.notifications/fetch-first-page])
     (fn []
-       (rn/use-effect-once #(rf/dispatch [:activity-center.notifications/fetch-first-page]))
+      (let [notifications (rf/sub [:activity-center/notifications])]
-       [safe-area/consumer
+        [rn/view {:flex 1 :padding-top (navigation/status-bar-height)}
-        (fn [{:keys [top bottom]}]
+         [blur/view style/blur]
-          (let [notifications (rf/sub [:activity-center/notifications])
+         [header]
-                window-width  (rf/sub [:dimensions/window-width])]
-            [rn/view {:style (style/screen-container window-width top bottom)}
-             [header request-close]
          [rn/flat-list
           {:data                      notifications
            :render-data               active-swipeable
@@ -221,4 +219,4 @@
            :key-fn                    :id
            :on-scroll-to-index-failed identity
            :on-end-reached            #(rf/dispatch [:activity-center.notifications/fetch-next-page])
-               :render-fn                 notification-component}]]))])]))
+           :render-fn                 notification-component}]]))))

src/status_im2/navigation/core.cljs

@@ -90,14 +90,13 @@
         (reset! state/curr-modal true)
         (swap! state/modals conj comp)
         (navigation/show-modal
-         {:stack {:children
+         {:component
-                  [{:component
           {:name    comp
            :id      comp
            :options (update-modal-topbar-options
                      (merge (roots/status-bar-options)
                             (roots/default-root)
-                                      options))}}]}})))))
+                            options))}})))))
 
 (re-frame/reg-fx :open-modal-fx open-modal)
 

src/status_im2/navigation/screens.cljs

@@ -12,7 +12,7 @@
             [status-im2.contexts.syncing.view :as settings-syncing]
             [status-im2.contexts.chat.lightbox.view :as lightbox]
             [status-im2.config :as config]
-            [quo.design-system.colors :as colors]
+            [quo2.foundations.colors :as colors]
             [status-im2.contexts.chat.photo-selector.album-selector.view :as album-selector]
             [react-native.platform :as platform]
             [status-im2.contexts.chat.photo-selector.view :as photo-selector]
@@ -21,6 +21,20 @@
 (def components
   [])
 
+(def transparent-screen-options
+  (merge
+   {:topBar                 {:visible false}
+    :modalPresentationStyle :overCurrentContext
+    :layout                 {:componentBackgroundColor :transparent
+                             :orientation              :portrait
+                             :backgroundColor          :transparent}}
+   (if platform/android?
+     {:navigationBar {:backgroundColor colors/neutral-100}
+      :statusBar     {:backgroundColor :transparent
+                      :style           :light
+                      :drawBehind      true}}
+     {:statusBar {:style :light}})))
+
 (defn screens
   []
   (concat
@@ -31,7 +45,8 @@
      :component intro/view}
 
     {:name      :activity-center
-     :options   {:topBar {:visible false}}
+     :insets    {:top false}
+     :options   transparent-screen-options
      :component activity-center/view}
 
     {:name      :shell-stack
@@ -45,10 +60,10 @@
     {:name      :lightbox
      :insets    {:top false :bottom false}
      :options   {:topBar        {:visible false}
-                 :statusBar     {:backgroundColor colors/black-persist
+                 :statusBar     {:backgroundColor colors/black
                                  :style           :light
                                  :animate         true}
-                 :navigationBar {:backgroundColor colors/black-persist}
+                 :navigationBar {:backgroundColor colors/black}
                  :animations    {:push {:sharedElementTransitions [{:fromId        :shared-element
                                                                     :toId          :shared-element
                                                                     :interpolation {:type   :decelerate

src/status_im2/navigation/view.cljs

@@ -37,14 +37,14 @@
    (concat screens/components)))
 
 (defn wrapped-screen-style
-  [screen-insets safe-insets]
+  [insets-options insets background-color]
   (merge
    {:flex             1
-    :background-color (colors/theme-colors colors/white colors/neutral-100)}
+    :background-color (or background-color (colors/theme-colors colors/white colors/neutral-100))}
-   (when (get screen-insets :bottom)
+   (when (get insets-options :bottom)
-     {:padding-bottom (:bottom safe-insets)})
+     {:padding-bottom (:bottom insets)})
-   (when (get screen-insets :top true)
+   (when (get insets-options :top true)
-     {:padding-top (:top safe-insets)})))
+     {:padding-top (:top insets)})))
 
 (defn inactive
   []
@@ -63,17 +63,15 @@
   [key]
   (reagent.core/reactify-component
    (fn []
-     (let [{:keys [component insets]} (get
+     (let [{:keys [component insets options]}
-                                       (if js/goog.DEBUG
+           (get (if js/goog.DEBUG (get-screens) screens) (keyword key))
-                                         (get-screens)
+           background-color (get-in options [:layout :backgroundColor])]
-                                         screens)
-                                       (keyword key))]
        ^{:key (str "root" key @reloader/cnt)}
        [safe-area/provider
         [safe-area/consumer
          (fn [safe-insets]
            [rn/view
-            {:style (wrapped-screen-style insets safe-insets)}
+            {:style (wrapped-screen-style insets safe-insets background-color)}
             [inactive]
             [component]])]
         (when js/goog.DEBUG