fix alert banner issues

.env

@@ -36,3 +36,4 @@ TEST_STATEOFUS=1
 FAST_CREATE_COMMUNITY_ENABLED=1
 TEST_NETWORKS_ENABLED=1
 SHOW_NOT_IMPLEMENTED_FEATURES=0
+ENABLE_ALERT_BANNER=0

.env.e2e

@@ -37,3 +37,4 @@ TEST_NETWORKS_ENABLED=1
 SHOW_NOT_IMPLEMENTED_FEATURES=1
 DELETE_MESSAGE_FOR_ME_UNDO_TIME_LIMIT=10000
 DELETE_MESSAGE_UNDO_TIME_LIMIT=10000
+ENABLE_ALERT_BANNER=0

.env.jenkins

@@ -37,3 +37,4 @@ LOCAL_PAIRING_ENABLED=1
 FAST_CREATE_COMMUNITY_ENABLED=1
 TEST_NETWORKS_ENABLED=1
 SHOW_NOT_IMPLEMENTED_FEATURES=1
+ENABLE_ALERT_BANNER=1

.env.nightly

@@ -23,3 +23,4 @@ DATABASE_MANAGEMENT_ENABLED=1
 DELETE_MESSAGE_ENABLED=1
 FAST_CREATE_COMMUNITY_ENABLED=0
 TEST_NETWORKS_ENABLED=0
+ENABLE_ALERT_BANNER=1

src/legacy/status_im/events.cljs

@@ -185,7 +185,8 @@
  (= :chat view-id)
  {:effects.async-storage/set {:chat-id (get-in cofx [:db :current-chat-id])
  :key-uid (get-in cofx [:db :profile/profile :key-uid])}
- :db (assoc db :screens/was-focused-once? true)}
+ :db (assoc db :screens/was-focused-once? true)
+ :dispatch [:alert-banners/unhide]}
 
  (not (get db :screens/was-focused-once?))
  {:db (assoc db :screens/was-focused-once? true)})))

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

@@ -223,25 +223,28 @@
 
 (defn show-image-picker
  ([images-fn]
- (show-image-picker images-fn nil))
+ (show-image-picker images-fn nil nil))
  ([images-fn
  {:keys [media-type]
  :or {media-type "any"}
- :as props}]
+ :as props}
+ finally-callback]
  (-> ^js image-picker
  (.openPicker (clj->js (merge {:mediaType media-type}
  props)))
  (.then images-fn)
- (.catch show-access-error))))
+ (.catch show-access-error)
+ (.finally finally-callback))))
 
 (defn show-image-picker-camera
  ([images-fn]
- (show-image-picker-camera images-fn nil))
- ([images-fn props]
+ (show-image-picker-camera images-fn nil nil))
+ ([images-fn props finally-callback]
  (-> ^js image-picker
  (.openCamera (clj->js props))
  (.then images-fn)
- (.catch show-access-error))))
+ (.catch show-access-error)
+ (.finally finally-callback))))
 
 ;; Clipboard
 

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,16 +19,22 @@
 (defn pick-pic
  []
  (re-frame/dispatch [:bottom-sheet/hide-old])
+ (when platform/ios?
+ (rf/dispatch [:alert-banners/hide]))
  (react/show-image-picker
  #(re-frame/dispatch [:profile.settings/save-profile-picture (.-path ^js %) 0 0 crop-size crop-size])
- crop-opts))
+ crop-opts
+ #(rf/dispatch [:alert-banners/unhide])))
 
 (defn take-pic
  []
  (re-frame/dispatch [:bottom-sheet/hide-old])
+ (when platform/ios?
+ (rf/dispatch [:alert-banners/hide]))
  (react/show-image-picker-camera
  #(re-frame/dispatch [:profile.settings/save-profile-picture (.-path ^js %) 0 0 crop-size crop-size])
- crop-opts))
+ crop-opts
+ #(rf/dispatch [:alert-banners/unhide])))
 
 (defn bottom-sheet
  [has-picture]

src/react_native/image_crop_picker.cljs

@@ -7,21 +7,24 @@
 
 (defn show-image-picker
  ([callback]
- (show-image-picker callback nil))
+ (show-image-picker callback nil nil))
  ([callback
  {:keys [media-type]
  :or {media-type "any"}
- :as props}]
+ :as props}
+ finally-callback]
  (-> ^js image-picker
  (.openPicker (clj->js (merge {:mediaType media-type} props)))
  (.then #(callback (.-path ^js %)))
- (.catch show-access-error))))
+ (.catch show-access-error)
+ (.finally finally-callback))))
 
 (defn show-image-picker-camera
  ([callback]
- (show-image-picker-camera callback nil))
- ([callback props]
+ (show-image-picker-camera callback nil nil))
+ ([callback props finally-callback]
  (-> ^js image-picker
  (.openCamera (clj->js props))
  (.then #(callback (.-path ^js %)))
- (.catch show-access-error))))
+ (.catch show-access-error)
+ (.finally finally-callback))))

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 1}
- :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/floating_button_page/component_spec.cljs

@@ -3,8 +3,12 @@
  [status-im.common.floating-button-page.view :as floating-button-page]
  [test-helpers.component :as h]))
 
+
+(def sub-mocks {:alert-banners/top-margin 0})
+
 (h/describe "floating button page"
  (h/test "renders with a header and standard button"
+ (h/setup-subs sub-mocks)
  (h/render [floating-button-page/view
  {:header [quo/page-nav
  {:type :title-description
@@ -18,6 +22,7 @@
  (h/is-truthy (h/get-by-text "floating button page")))
 
  (h/test "renders with a header and a slide button"
+ (h/setup-subs sub-mocks)
  (h/render [floating-button-page/view
  {:header [quo/page-nav
  {:type :title-description

src/status_im/common/floating_button_page/view.cljs

@@ -8,7 +8,8 @@
  [react-native.safe-area :as safe-area]
  [reagent.core :as reagent]
  [status-im.common.floating-button-page.floating-container.view :as floating-container]
- [status-im.common.floating-button-page.style :as style]))
+ [status-im.common.floating-button-page.style :as style]
+ [utils.re-frame :as rf]))
 
 (defn- show-background
  [{:keys [window-height keyboard-height footer-container-height content-scroll-y
@@ -82,14 +83,15 @@
  set-content-y-scroll (fn [event]
  (reset! content-scroll-y
  (oops/oget event "nativeEvent.contentOffset.y")))]
- (let [keyboard-shown? (if platform/ios? @keyboard-will-show? @keyboard-did-show?)
- show-background? (show-background {:window-height window-height
- :footer-container-height @footer-container-height
- :keyboard-height @keyboard-height
- :content-scroll-y @content-scroll-y
- :content-container-height @content-container-height
- :header-height @header-height
- :keyboard-shown? keyboard-shown?})]
+ (let [keyboard-shown? (if platform/ios? @keyboard-will-show? @keyboard-did-show?)
+ footer-container-padding (+ footer-container-padding (rf/sub [:alert-banners/top-margin]))
+ show-background? (show-background {:window-height window-height
+ :footer-container-height @footer-container-height
+ :keyboard-height @keyboard-height
+ :content-scroll-y @content-scroll-y
+ :content-container-height @content-container-height
+ :header-height @header-height
+ :keyboard-shown? keyboard-shown?})]
  [:<>
  (when gradient-cover?
  [quo/gradient-cover {:customization-color customization-color}])

src/status_im/common/image_crop_picker/events.cljs

@@ -1,14 +1,25 @@
 (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]]
- (image-crop-picker/show-image-picker callback crop-opts)))
+ (when platform/ios?
+ (rf/dispatch [:alert-banners/hide]))
+ (image-crop-picker/show-image-picker
+ callback
+ crop-opts
+ #(rf/dispatch [:alert-banners/unhide]))))
 
 (rf/reg-fx :effect.image-crop-picker/show-camera
  (fn [[callback crop-opts]]
- (image-crop-picker/show-image-picker-camera callback crop-opts)))
+ (when platform/ios?
+ (rf/dispatch [:alert-banners/hide]))
+ (image-crop-picker/show-image-picker-camera
+ callback
+ crop-opts
+ #(rf/dispatch [:alert-banners/unhide]))))
 
 (rf/reg-event-fx
  :image-crop-picker/show

src/status_im/common/lightbox/view.cljs

@@ -51,9 +51,11 @@
  insets (safe-area/get-insets)
  window (rn/get-window)
  window-width (:width window)
- window-height (if platform/android?
- (+ (:height window) (:top insets))
- (:height window))
+ alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
+ window-height (- (if platform/android?
+ (+ (:height window) (:top insets))
+ (:height window))
+ alert-banners-top-margin)
  curr-orientation (or (rf/sub [:lightbox/orientation]) orientation/portrait)
  landscape? (string/includes? curr-orientation orientation/landscape)
  horizontal? (or platform/android? (not landscape?))

src/status_im/config.cljs

@@ -136,3 +136,7 @@
 (def community-accounts-selection-enabled? true)
 (def fetch-messages-enabled? (enabled? (get-config :FETCH_MESSAGES_ENABLED "1")))
 (def test-networks-enabled? (enabled? (get-config :TEST_NETWORKS_ENABLED "0")))
+
+;; Alert banners are disabled for debug builds because alert banners overlay
+;; interfere with react-native debug tools, such as inspector and Perf monitor
+(def enable-alert-banner? (enabled? (get-config :ENABLE_ALERT_BANNER "0")))

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/ios?
+ (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/composer/keyboard.cljs

@@ -14,8 +14,9 @@
  curr-height))
 
 (defn store-kb-height
- [event {:keys [kb-default-height kb-height]} {:keys [window-height]}]
- (let [height (- window-height (oops/oget event "endCoordinates.screenY"))]
+ [event {:keys [kb-default-height kb-height]}]
+ (let [height (- (:height (rn/get-window))
+ (oops/oget event "endCoordinates.screenY"))]
  (reset! kb-height height)
  (when (zero? @kb-default-height)
  (async-storage/set-item! :kb-default-height (str height)))))
@@ -56,9 +57,10 @@
 (defn add-kb-listeners
  [{:keys [keyboard-show-listener keyboard-frame-listener keyboard-hide-listener input-ref] :as props}
  state animations dimensions]
- (reset! keyboard-show-listener (.addListener rn/keyboard
- "keyboardDidShow"
- #(store-kb-height % state dimensions)))
+ (reset! keyboard-show-listener (.addListener
+ rn/keyboard
+ "keyboardDidShow"
+ #(store-kb-height % state)))
  (reset! keyboard-frame-listener (.addListener
  rn/keyboard
  "keyboardWillChangeFrame"

src/status_im/contexts/chat/messenger/composer/utils.cljs

@@ -191,15 +191,16 @@
 (defn init-subs
  []
  (let [chat-input (rf/sub [:chats/current-chat-input])]
- {:images (seq (rf/sub [:chats/sending-image]))
- :link-previews? (or (rf/sub [:chats/link-previews?])
- (rf/sub [:chats/status-link-previews?]))
- :audio (rf/sub [:chats/sending-audio])
- :reply (rf/sub [:chats/reply-message])
- :edit (rf/sub [:chats/edit-message])
- :input-with-mentions (rf/sub [:chat/input-with-mentions])
- :input-text (:input-text chat-input)
- :input-content-height (:input-content-height chat-input)}))
+ {:images (seq (rf/sub [:chats/sending-image]))
+ :link-previews? (or (rf/sub [:chats/link-previews?])
+ (rf/sub [:chats/status-link-previews?]))
+ :audio (rf/sub [:chats/sending-audio])
+ :reply (rf/sub [:chats/reply-message])
+ :edit (rf/sub [:chats/edit-message])
+ :input-with-mentions (rf/sub [:chat/input-with-mentions])
+ :input-text (:input-text chat-input)
+ :alert-banners-top-margin (rf/sub [:alert-banners/top-margin])
+ :input-content-height (:input-content-height chat-input)}))
 
 (defn init-shared-values
  []

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

@@ -39,6 +39,12 @@
  theme
  window-height]} props state shared-values]
  (let [subscriptions (utils/init-subs)
+ top-margin (if (pos? (:alert-banners-top-margin subscriptions))
+ ;; top margin increased to avoid composer overlapping with the
+ ;; alert banner
+ (+ (:alert-banners-top-margin subscriptions) 12)
+ 0)
+ window-height (- window-height top-margin)
  content-height (reagent/atom (or (:input-content-height ; Actual text height
  subscriptions)
  constants/input-height))