diff --git a/src/quo2/components/buttons/dynamic_button.cljs b/src/quo2/components/buttons/dynamic_button.cljs index 4751594a65..665567bf2f 100644 --- a/src/quo2/components/buttons/dynamic_button.cljs +++ b/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 diff --git a/src/quo2/components/navigation/floating_shell_button.cljs b/src/quo2/components/navigation/floating_shell_button.cljs index 595be89516..64149f28e3 100644 --- a/src/quo2/components/navigation/floating_shell_button.cljs +++ b/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}]]]]))])) diff --git a/src/status_im2/contexts/chat/messages/list/view.cljs b/src/status_im2/contexts/chat/messages/list/view.cljs index b53a90d011..afefc6ecfb 100644 --- a/src/status_im2/contexts/chat/messages/list/view.cljs +++ b/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}]])) diff --git a/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs b/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs index 29c6fd9b36..03a2f5afc6 100644 --- a/src/status_im2/contexts/quo_preview/buttons/dynamic_button.cljs +++ b/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 diff --git a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs b/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs index 4121d3a056..72d5613aa2 100644 --- a/src/status_im2/contexts/quo_preview/navigation/floating_shell_button.cljs +++ b/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 [] diff --git a/src/status_im2/contexts/shell/animation.cljs b/src/status_im2/contexts/shell/animation.cljs index 54e666f286..16d4d32099 100644 --- a/src/status_im2/contexts/shell/animation.cljs +++ b/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) diff --git a/src/status_im2/contexts/shell/constants.cljs b/src/status_im2/contexts/shell/constants.cljs index 4091fe9d59..7f3fc0b0bf 100644 --- a/src/status_im2/contexts/shell/constants.cljs +++ b/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])] diff --git a/src/status_im2/contexts/shell/style.cljs b/src/status_im2/contexts/shell/style.cljs index 8b1365e635..eb6d599c0d 100644 --- a/src/status_im2/contexts/shell/style.cljs +++ b/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) diff --git a/src/status_im2/contexts/shell/view.cljs b/src/status_im2/contexts/shell/view.cljs index f8bc9a223e..3cece63e71 100644 --- a/src/status_im2/contexts/shell/view.cljs +++ b/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] diff --git a/src/status_im2/setup/core.cljs b/src/status_im2/setup/core.cljs index 0b2d89c31f..b3ea685494 100644 --- a/src/status_im2/setup/core.cljs +++ b/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]))