fix Home-stack overlaps bottom tabs in Xiaomi devices on first run (#15821)

This commit is contained in:
Parvesh Monu 2023-05-09 16:03:13 +05:30 committed by GitHub
parent ab973076eb
commit ebb110e6e3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 25 deletions

View File

@ -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

View File

@ -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]