fix home stack height (#14639)

src/quo2/components/buttons/dynamic_button.cljs

@@ -31,7 +31,7 @@
      :notification-up   :i/arrow-up
      :search-with-label :i/search
      :search            :i/search
-     :bottom            :i/arrow-down)
+     :scroll-to-bottom  :i/arrow-down)
    {:size            12
     :color           (get-icon-and-text-color type)
     :container-style {:margin-top    6
@@ -43,7 +43,7 @@
                                        :notification-up   2
                                        :search-with-label 8
                                        :search            6
-                                       :bottom            6)
+                                       :scroll-to-bottom  6)
                       :margin-right  (case type
                                        :jump-to           8
                                        :mention           2
@@ -51,12 +51,12 @@
                                        :notification-up   8
                                        :search-with-label 4
                                        :search            6
-                                       :bottom            6)}}])
+                                       :scroll-to-bottom  6)}}])
 
 (defn dynamic-button
   "[dynamic-button opts]
    opts
-   {:type                :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:bottom
+   {:type                :jump-to/:mention/:notification-down/:notification-up/:search/:search-with-label/:scroll-to-bottom
     :on-press            fn
     :count               mentions or notifications count
     :customization-color customize jump-to and mention button color}"
@@ -77,7 +77,7 @@
                   :border-radius    12
                   :background-color (get-button-color type @pressed? (or customization-color :primary))}
                  style)}
-        (when (#{:mention :search :search-with-label :bottom} type)
+        (when (#{:mention :search :search-with-label :scroll-to-bottom} type)
           [icon-view type])
         (when (#{:jump-to :mention :notification-down :notification-up :search-with-label} type)
           [text/text

src/quo2/components/navigation/floating_shell_button.cljs

@@ -50,4 +50,4 @@
            [dynamic-button-view :mention dynamic-buttons {:margin-left 8}]
            [dynamic-button-view :notification-down dynamic-buttons {:margin-left 8}]
            [dynamic-button-view :notification-up dynamic-buttons {:margin-left 8}]
-           [dynamic-button-view :bottom dynamic-buttons {:margin-left 8}]]]]))]))
+           [dynamic-button-view :scroll-to-bottom dynamic-buttons {:margin-left 8}]]]]))]))

src/status_im2/contexts/chat/messages/list/view.cljs

@@ -182,6 +182,6 @@
               {:on-press #(rf/dispatch [:shell/navigate-to-jump-to])
                :label    (i18n/label :t/jump-to)}}
              (when @show-floating-scroll-down-button
-               {:bottom {:on-press scroll-to-bottom}}))
+               {:scroll-to-bottom {:on-press scroll-to-bottom}}))
       {:position :absolute
        :bottom   12}]]))

src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs

@@ -22,7 +22,7 @@
                :value "Search"}
               {:key   :search-with-label
                :value "Search With Label"}
-              {:key   :bottom
+              {:key   :scroll-to-bottom
                :value "Bottom"}]}
    {:label "Count"
     :key   :count

src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs

@@ -41,7 +41,7 @@
     (= scroll-type :notification-down)
     (assoc :notification-down {:on-press #() :count 8})
     (= scroll-type :scroll-to-bottom)
-    (assoc :bottom {:on-press #()})))
+    (assoc :scroll-to-bottom {:on-press #()})))
 
 (defn cool-preview
   []

src/status_im2/contexts/shell/animation.cljs

@@ -9,6 +9,7 @@
 
 ;; Atoms
 (def selected-stack-id (atom nil))
+(def screen-height (atom nil))
 (def home-stack-state (atom shell.constants/close-with-animation))
 (def pass-through? (atom false)) ;; TODO - Use dynamic pass-through for transparent bottom tabs
 (def shared-values-atom (atom nil))
@@ -47,6 +48,7 @@
 (defn calculate-home-stack-position
   []
   (let [{:keys [width height]} (shell.constants/dimensions)
+        height                 (or @screen-height height)
         bottom-nav-tab-width   90
         minimize-scale         (/ bottom-nav-tab-width width)
         empty-space-half-scale (/ (- 1 minimize-scale) 2)

src/status_im2/contexts/shell/constants.cljs

@@ -19,6 +19,7 @@
 
 ;; status bar height is not included in : the dimensions/window for devices with a notch
 ;; https://github.com/facebook/react-native/issues/23693#issuecomment-662860819
+;; More info - https://github.com/status-im/status-mobile/issues/14633
 (defn dimensions
   []
   (let [{:keys [width height]} (rf/sub [:dimensions/window])]

src/status_im2/contexts/shell/style.cljs

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.shell.style
   (:require [quo2.foundations.colors :as colors]
             [react-native.platform :as platform]
+            [status-im2.contexts.shell.animation :as animation]
             [status-im2.contexts.shell.constants :as shell.constants]))
 
 ;; Bottom Tabs
@@ -28,7 +29,8 @@
 ;; Home Stack
 (defn home-stack
   []
-  (let [{:keys [width height]} (shell.constants/dimensions)]
+  (let [{:keys [width height]} (shell.constants/dimensions)
+        height                 (or @animation/screen-height height)]
     {:border-bottom-left-radius  20
      :border-bottom-right-radius 20
      :background-color           (colors/theme-colors colors/neutral-5 colors/neutral-95)

src/status_im2/contexts/shell/view.cljs

@@ -1,11 +1,13 @@
 (ns status-im2.contexts.shell.view
   (:require [i18n.i18n :as i18n]
             [quo2.core :as quo]
+            [oops.core :refer [oget]]
             [quo2.foundations.colors :as colors]
             [react-native.core :as rn]
             [react-native.linear-gradient :as linear-gradient]
             [react-native.safe-area :as safe-area]
             [status-im2.common.home.view :as common.home]
+            [status-im.async-storage.core :as async-storage]
             [status-im2.contexts.shell.animation :as animation]
             [status-im2.contexts.shell.bottom-tabs :as bottom-tabs]
             [status-im2.contexts.shell.cards.view :as switcher-cards]
@@ -111,7 +113,13 @@
   [:f>
    (fn []
      (let [shared-values (animation/calculate-shared-values)]
-       [:<>
+       [rn/view
+        {:style     {:flex 1}
+         :on-layout (when-not @animation/screen-height
+                      (fn [evt]
+                        (let [height (oget evt "nativeEvent" "layout" "height")]
+                          (reset! animation/screen-height height)
+                          (async-storage/set-item! :screen-height height))))}
         [shell]
         [bottom-tabs/bottom-tabs]
         [home-stack/home-stack]

src/status_im2/setup/core.cljs

@@ -51,6 +51,8 @@
   ;; TODO(parvesh) - Remove while moving functionality to status-go
   (async-storage/get-item :selected-stack-id #(animation/selected-stack-id-loaded %))
 
+  (async-storage/get-item :screen-height #(reset! animation/screen-height %))
+
   (dev/setup)
 
   (re-frame/dispatch-sync [:setup/app-started]))