fix Home-stack overlaps bottom tabs in Xiaomi devices on first run (#15821)
This commit is contained in:
parent
ab973076eb
commit
ebb110e6e3
|
@ -3,7 +3,10 @@
|
|||
[react-native.blur :as blur]
|
||||
[utils.i18n :as i18n]
|
||||
[utils.re-frame :as rf]
|
||||
[oops.core :refer [oget]]
|
||||
[status-im2.common.resources :as resources]
|
||||
[status-im.async-storage.core :as async-storage]
|
||||
[status-im2.contexts.shell.animation :as shell.animation]
|
||||
[status-im2.contexts.onboarding.common.carousel.view :as carousel]
|
||||
[status-im2.contexts.onboarding.common.background.style :as style]
|
||||
[react-native.reanimated :as reanimated]
|
||||
|
@ -29,6 +32,27 @@
|
|||
(defonce progress (atom nil))
|
||||
(defonce paused (atom nil))
|
||||
|
||||
(defn store-screen-height
|
||||
[evt]
|
||||
(let [window-height (rf/sub [:dimensions/window-height])
|
||||
height (or (oget evt "nativeEvent" "layout" "height") 0)
|
||||
width (or (oget evt "nativeEvent" "layout" "width") 0)]
|
||||
;; Layout height calculation
|
||||
;; 1. Make sure height is more than width, and on-layout is not fired while the
|
||||
;; screen is horizontal
|
||||
;; 2. Initialize values with 0 in case of nil
|
||||
;; 3. In the case of notch devices, the dimensions height will be smaller than
|
||||
;; on-layout,
|
||||
;; (without status bar height included)
|
||||
;; https://github.com/status-im/status-mobile/issues/14633
|
||||
;; 4. In the case of devices without a notch, both heights should be the same,
|
||||
;; but actual values differ in some pixels, so arbitrary 5 pixels is allowed
|
||||
(when (and (> height width)
|
||||
(>= (+ height 5) (or window-height 0))
|
||||
(not= height @shell.animation/screen-height))
|
||||
(reset! shell.animation/screen-height height)
|
||||
(async-storage/set-item! :screen-height height))))
|
||||
|
||||
(defn f-view
|
||||
[dark-overlay?]
|
||||
(let [view-id (rf/sub [:view-id])
|
||||
|
@ -46,7 +70,8 @@
|
|||
[view-id])
|
||||
|
||||
[rn/view
|
||||
{:style style/background-container}
|
||||
{:style style/background-container
|
||||
:on-layout store-screen-height}
|
||||
[carousel/view
|
||||
{:animate? animate?
|
||||
:progress progress
|
||||
|
|
|
@ -1,14 +1,12 @@
|
|||
(ns status-im2.contexts.shell.view
|
||||
(:require [utils.i18n :as i18n]
|
||||
[quo2.core :as quo]
|
||||
[oops.core :refer [oget]]
|
||||
[quo2.foundations.colors :as colors]
|
||||
[react-native.core :as rn]
|
||||
[react-native.blur :as blur]
|
||||
[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]
|
||||
|
@ -112,32 +110,11 @@
|
|||
:style {:margin-top top
|
||||
:z-index 2}}]]))
|
||||
|
||||
(defn on-layout
|
||||
[evt]
|
||||
(let [dimensions (rf/sub [:dimensions/window])
|
||||
height (or (oget evt "nativeEvent" "layout" "height") 0)
|
||||
width (or (oget evt "nativeEvent" "layout" "width") 0)]
|
||||
;; Layout height calculation
|
||||
;; 1. Make sure height is more than width, and on-layout is not fired while the
|
||||
;; screen is horizontal
|
||||
;; 2. Initialize values with 0 in case of nil
|
||||
;; 3. In the case of notch devices, the dimensions height will be smaller than
|
||||
;; on-layout,
|
||||
;; (without status bar height included)
|
||||
;; https://github.com/status-im/status-mobile/issues/14633
|
||||
;; 4. In the case of devices without a notch, both heights should be the same,
|
||||
;; but actual values differ in some pixels, so arbitrary 5 pixels is allowed
|
||||
(when (and (> height width)
|
||||
(>= (+ height 5) (or (:height dimensions) 0)))
|
||||
(reset! animation/screen-height height)
|
||||
(async-storage/set-item! :screen-height height))))
|
||||
|
||||
(defn f-shell-stack
|
||||
[]
|
||||
(let [shared-values (animation/calculate-shared-values)]
|
||||
[rn/view
|
||||
{:style {:flex 1}
|
||||
:on-layout on-layout}
|
||||
{:style {:flex 1}}
|
||||
[shell]
|
||||
[bottom-tabs/bottom-tabs]
|
||||
[:f> home-stack/f-home-stack]
|
||||
|
|
Loading…
Reference in New Issue