test

src/legacy/status_im/ui/screens/profile/user/edit_picture.cljs

@@ -3,9 +3,11 @@
     [legacy.status-im.ui.components.list.item :as list.item]
     [legacy.status-im.ui.components.react :as react]
     [re-frame.core :as re-frame]
+    [react-native.platform :as platform]
     [status-im.config :as config]
     [status-im.contexts.profile.settings.events]
-    [utils.i18n :as i18n]))
+    [utils.i18n :as i18n]
+    [utils.re-frame :as rf]))
 
 (def crop-size 1000)
 (def crop-opts
@@ -17,13 +19,17 @@
 (defn pick-pic
   []
   (re-frame/dispatch [:bottom-sheet/hide-old])
+  (when platform/ios?
+    (rf/dispatch [:alert-banners/remove-all]))
   (react/show-image-picker
    #(re-frame/dispatch [:profile.settings/save-profile-picture (.-path ^js %) 0 0 crop-size crop-size])
    crop-opts))
 
 (defn take-pic
   []
   (re-frame/dispatch [:bottom-sheet/hide-old])
+  (when platform/ios?
+    (rf/dispatch [:alert-banners/remove-all]))
   (react/show-image-picker-camera
    #(re-frame/dispatch [:profile.settings/save-profile-picture (.-path ^js %) 0 0 crop-size crop-size])
    crop-opts))

src/status_im/common/alert_banner/events.cljs

@@ -22,6 +22,18 @@
   {:db                (dissoc db :alert-banners)
    :hide-alert-banner [(:view-id db) (:theme db)]})
 
+;; Hide/Unhide will only toggle the visibility of alert banners without removing them.
+;; Required for ios image picker, which doesn't allow top margin
+(defn hide-alert-banners
+  [{:keys [db]}]
+  {:db (assoc db :alert-banners/hide? true)})
+
+(defn unhide-alert-banners
+  [{:keys [db]}]
+  {:db (dissoc db :alert-banners/hide?)})
+
 (re-frame/reg-event-fx :alert-banners/add add-alert-banner)
 (re-frame/reg-event-fx :alert-banners/remove remove-alert-banner)
 (re-frame/reg-event-fx :alert-banners/remove-all remove-all-alert-banners)
+(re-frame/reg-event-fx :alert-banners/hide hide-alert-banners)
+(re-frame/reg-event-fx :alert-banners/unhide unhide-alert-banners)

src/status_im/common/alert_banner/view.cljs

@@ -39,32 +39,34 @@
 (defn view
   []
   (let [banners       (rf/sub [:alert-banners])
+        hide-banners? (rf/sub [:alert-banners/hide?])
         theme         (quo.theme/use-theme)
         banners-count (count banners)
         alert-banner  (:alert banners)
         error-banner  (:error banners)
         safe-area-top (safe-area/get-top)
         colors-map    (get-colors-map theme)]
-    [hole-view/hole-view
-     ;; required for fix flicker issue https://github.com/status-im/status-mobile/issues/19490
-     {:style {:padding-bottom 0.5}
-      :holes [{:x            0
-               :y            (+ safe-area-top (* constants/alert-banner-height banners-count))
-               :width        (:width (rn/get-window))
-               :height       constants/alert-banner-height
-               :borderRadius style/border-radius}]}
-     [rn/view {:style {:background-color colors/neutral-100}}
-      [rn/view
-       {:style {:height           safe-area-top
-                :background-color (get-in colors-map
-                                          [(if error-banner :error :alert) :background-color])}}]
-      (when error-banner
-        [banner
-         (assoc error-banner
-                :colors-map     colors-map
-                :second-banner? false)])
-      (when alert-banner
-        [banner
-         (assoc alert-banner
-                :colors-map     colors-map
-                :second-banner? (= 2 banners-count))])]]))
+    (when-not hide-banners?
+      [hole-view/hole-view
+       ;; required for fix flicker issue https://github.com/status-im/status-mobile/issues/19490
+       {:style {:padding-bottom 0.5}
+        :holes [{:x            0
+                 :y            (+ safe-area-top (* constants/alert-banner-height banners-count))
+                 :width        (:width (rn/get-window))
+                 :height       constants/alert-banner-height
+                 :borderRadius style/border-radius}]}
+       [rn/view {:style {:background-color colors/neutral-100}}
+        [rn/view
+         {:style {:height           safe-area-top
+                  :background-color (get-in colors-map
+                                            [(if error-banner :error :alert) :background-color])}}]
+        (when error-banner
+          [banner
+           (assoc error-banner
+                  :colors-map     colors-map
+                  :second-banner? false)])
+        (when alert-banner
+          [banner
+           (assoc alert-banner
+                  :colors-map     colors-map
+                  :second-banner? (= 2 banners-count))])]])))

src/status_im/common/image_crop_picker/events.cljs

@@ -1,13 +1,18 @@
 (ns status-im.common.image-crop-picker.events
   (:require [react-native.image-crop-picker :as image-crop-picker]
+            [react-native.platform :as platform]
             [utils.re-frame :as rf]))
 
 (rf/reg-fx :effect.image-crop-picker/show
  (fn [[callback crop-opts]]
+   (when platform/ios?
+     (rf/dispatch [:alert-banners/remove-all]))
    (image-crop-picker/show-image-picker callback crop-opts)))
 
 (rf/reg-fx :effect.image-crop-picker/show-camera
  (fn [[callback crop-opts]]
+   (when platform/ios?
+     (rf/dispatch [:alert-banners/remove-all]))
    (image-crop-picker/show-image-picker-camera callback crop-opts)))
 
 (rf/reg-event-fx

src/status_im/contexts/chat/messenger/composer/actions/view.cljs

@@ -186,6 +186,8 @@
     :on-allowed  (fn []
                    (when (and platform/android? @input-ref)
                      (.blur ^js @input-ref))
+                   (when platform/android?
+                     (rf/dispatch [:alert-banners/hide]))
                    (rf/dispatch [:chat.ui/set-input-content-height
                                  (reanimated/get-shared-value height)])
                    (rf/dispatch [:photo-selector/navigate-to-photo-selector]))

src/status_im/contexts/chat/messenger/messages/view.cljs

@@ -11,44 +11,31 @@
     [status-im.contexts.chat.messenger.placeholder.view :as placeholder.view]
     [utils.re-frame :as rf]))
 
-;; NOTE(parvesh) - I am working on refactoring/optimization of the chat screen for performance
-;; improvement. Please avoid refactoring these files. Also if you are not already working on bug
-;; fixes related to the composer, please skip them. And ping me, so I can address them while refactoring
 (defn- chat-screen
-  [chat-screen-layout-calculations-complete?]
-  (let [insets                   (safe-area/get-insets)
-        content-height           (atom 0)
-        layout-height            (atom 0)
-        distance-atom            (atom 0)
-        distance-from-list-top   (reanimated/use-shared-value 0)
-        chat-list-scroll-y       (reanimated/use-shared-value 0)
-        alert-banners-top-margin (rf/sub [:alert-banners/top-margin])]
+  [{:keys [insets] :as props}]
+  (let [alert-banners-top-margin (rf/sub [:alert-banners/top-margin])]
     [rn/keyboard-avoiding-view
      {:style                    style/keyboard-avoiding-container
       :keyboard-vertical-offset (- (if platform/ios? alert-banners-top-margin 0) (:bottom insets))}
-     [list.view/messages-list-content
-      {:insets                                    insets
-       :layout-height                             layout-height
-       :content-height                            content-height
-       :distance-atom                             distance-atom
-       :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?
-       :distance-from-list-top                    distance-from-list-top
-       :chat-list-scroll-y                        chat-list-scroll-y}]
-     [messages.navigation/view
-      {:distance-from-list-top                    distance-from-list-top
-       :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?}]
-     [composer.view/composer
-      {:insets                                    insets
-       :chat-screen-layout-calculations-complete? chat-screen-layout-calculations-complete?
-       :chat-list-scroll-y                        chat-list-scroll-y}]]))
+     [list.view/messages-list-content props]
+     [messages.navigation/view props]
+     [composer.view/composer props]]))
 
 (defn lazy-chat-screen
   [chat-screen-layout-calculations-complete?]
-  (let [screen-loaded? (rf/sub [:shell/chat-screen-loaded?])]
+  (let [screen-loaded? (rf/sub [:shell/chat-screen-loaded?])
+        props          {:insets (safe-area/get-insets)
+                        :content-height (atom 0)
+                        :layout-height (atom 0)
+                        :distance-atom (atom 0)
+                        :distance-from-list-top (reanimated/use-shared-value 0)
+                        :chat-list-scroll-y (reanimated/use-shared-value 0)
+                        :chat-screen-layout-calculations-complete?
+                        chat-screen-layout-calculations-complete?}]
     (when-not screen-loaded?
       (reanimated/set-shared-value chat-screen-layout-calculations-complete? false))
     (when screen-loaded?
-      [chat-screen chat-screen-layout-calculations-complete?])))
+      [chat-screen props])))
 
 (defn chat
   []

src/status_im/subs/alert_banner.cljs

@@ -6,8 +6,9 @@
 (re-frame/reg-sub
  :alert-banners/top-margin
  :<- [:alert-banners]
- (fn [banners]
+ :<- [:alert-banners/hide?]
+ (fn [[banners hide-banners?]]
    (let [banners-count (count banners)]
-     (if (pos? banners-count)
+     (if (and (pos? banners-count) (not hide-banners?))
        (+ (* constants/alert-banner-height banners-count) 10)
        0))))

src/status_im/subs/alert_banner_test.cljs

@@ -8,25 +8,25 @@
 
 (h/deftest-sub :alert-banners/top-margin
   [sub-name]
-  (testing "returns 48 when only alert banner"
+  (testing "returns 50 when only alert banner"
     (swap! rf-db/app-db assoc
       :alert-banners
       {:alert {:text "Alert"
                :type :alert}})
-    (is (= (rf/sub [sub-name]) 48)))
+    (is (= (rf/sub [sub-name]) 50)))
 
-  (testing "returns 48 when only error banner"
+  (testing "returns 50 when only error banner"
     (swap! rf-db/app-db assoc
       :alert-banners
       {:error {:text "Error"
                :type :error}})
-    (is (= (rf/sub [sub-name]) 48)))
+    (is (= (rf/sub [sub-name]) 50)))
 
-  (testing "returns 88 when both alert and error banner"
+  (testing "returns 90 when both alert and error banner"
     (swap! rf-db/app-db assoc
       :alert-banners
       {:alert {:text "Alert"
                :type :alert}
        :error {:text "Error"
                :type :error}})
-    (is (= (rf/sub [sub-name]) 88))))
+    (is (= (rf/sub [sub-name]) 90))))

src/status_im/subs/root.cljs

@@ -64,6 +64,7 @@
 (reg-root-key-sub :password-authentication :password-authentication)
 (reg-root-key-sub :initials-avatar-font-file :initials-avatar-font-file)
 (reg-root-key-sub :alert-banners :alert-banners)
+(reg-root-key-sub :alert-banners/hide? :alert-banners/hide?)
 
 ;;onboarding
 (reg-root-key-sub :onboarding/generated-keys? :onboarding/generated-keys?)