[#6043] [android] fix "Fetching messages..." shifted down when appears in public chat modal

src/status_im/ui/components/connectivity/styles.cljs

@@ -3,9 +3,9 @@
   (:require [status-im.ui.components.colors :as colors]
             [status-im.utils.platform :as platform]))
 
-(defnstyle text-wrapper [top opacity window-width pending?]
+(defnstyle text-wrapper [{:keys [top window-width pending? modal?]}]
   (cond->
-   {:opacity          opacity
+   {:opacity          1.0
     :background-color colors/gray-notifications
     :height           35
     :position         :absolute}
@@ -17,7 +17,9 @@
     (assoc
      :ios {:z-index 0}
      :width window-width
-     :top              (+ (+ 56 top) (if pending? 35 0)))))
+     :top (+ top
+             (if (and modal? platform/android?) 31 56)
+             (if pending? 35 0)))))
 
 (def text
   {:text-align :center

src/status_im/ui/components/connectivity/view.cljs

@@ -6,6 +6,22 @@
             [status-im.ui.components.connectivity.styles :as styles]
             [status-im.i18n :as i18n]))
 
+(defview error-label
+  [{:keys [view-id label mailserver-error?] :as opts}]
+
+  {:should-component-update
+   (fn [_ [_ old-props] [_ new-props]]
+     ;; prevents flickering on navigation
+     (= (:view-id old-props) (:view-id new-props)))}
+  (let [wrapper-style (styles/text-wrapper
+                       (assoc opts :modal? (= view-id :chat-modal)))]
+    [react/view {:style               wrapper-style
+                 :accessibility-label :connection-status-text}
+     [react/text {:style    styles/text
+                  :on-press (when mailserver-error?
+                              #(re-frame/dispatch [:inbox/reconnect]))}
+      (i18n/label label)]]))
+
 (defview error-view [{:keys [top]}]
   (letsubs [offline?             [:offline?]
             disconnected?        [:disconnected?]
@@ -21,9 +37,10 @@
                        fetching? :t/fetching-messages
                        :else nil)]
       (let [pending? (and (:pending current-chat-contact) (= :chat view-id))]
-        [react/view {:style               (styles/text-wrapper top 1.0 window-width pending?)
-                     :accessibility-label :connection-status-text}
-         [react/text {:style    styles/text
-                      :on-press (when mailserver-error?
-                                  #(re-frame/dispatch [:inbox/reconnect]))}
-          (i18n/label label)]]))))
+        [error-label
+         {:view-id           view-id
+          :top               top
+          :window-width      window-width
+          :pending?          pending?
+          :label             label
+          :mailserver-error? mailserver-error?}]))))