From cb081f6d96f58a7ab03fce90e537591f15bf5ba9 Mon Sep 17 00:00:00 2001
From: Gheorghe Pinzaru <feross95@gmail.com>
Date: Mon, 6 Jan 2020 13:13:06 +0300
Subject: [PATCH] Change safe-area from position to padding

Makes the view stretch to the size of safe area instead of moving it from bottom. Fixes transparent background on navigation animation iPhoneX.  Fixes #9695

Do not set cover bg on android

Signed-off-by: yenda <eric@status.im>
---
 src/status_im/ui/components/tabbar/core.cljs  |  5 ++--
 .../ui/components/tabbar/styles.cljs          | 23 ++++++++++++-------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/status_im/ui/components/tabbar/core.cljs b/src/status_im/ui/components/tabbar/core.cljs
index a30919cce7..9c84e1bf28 100644
--- a/src/status_im/ui/components/tabbar/core.cljs
+++ b/src/status_im/ui/components/tabbar/core.cljs
@@ -104,9 +104,8 @@
 
 (defn tabs-animation-wrapper-ios
   [content]
-  [react/view
+  [react/view {:style tabs.styles/title-cover-wrapper-ios}
    [react/view
-    {:style tabs.styles/title-cover-wrapper}
     content
     (when platform/iphone-x?
       [react/view
@@ -119,7 +118,7 @@
             keyboard-shown?
             (main-tab? view-id))}
    [react/view
-    {:style tabs.styles/title-cover-wrapper}
+    {:style tabs.styles/title-cover-wrapper-android}
     content]])
 
 (defn tabs-animation-wrapper [keyboard-shown? view-id tab]
diff --git a/src/status_im/ui/components/tabbar/styles.cljs b/src/status_im/ui/components/tabbar/styles.cljs
index 402cd109e6..81dcb78640 100644
--- a/src/status_im/ui/components/tabbar/styles.cljs
+++ b/src/status_im/ui/components/tabbar/styles.cljs
@@ -129,20 +129,27 @@
    :position         :absolute
    :height           (- tabs-height minimized-tabs-height)
    :align-self       :stretch
-   :top              tabs-height
+   :top              0
    :right            0
    :left             0})
 
-(def title-cover-wrapper
-  {:position :absolute
-   :height   tabs-height
-   :bottom   (if platform/iphone-x? 34 0)
+(def title-cover-wrapper-ios
+  {:left             0
+   :right            0
+   :bottom           0
+   :padding-bottom   (if platform/iphone-x? 34 0)
+   :position         :absolute
+   :background-color :white})
+
+(def title-cover-wrapper-android
+  {:left     0
    :right    0
-   :left     0})
+   :bottom   0
+   :position :absolute})
 
 (defn animation-wrapper [keyboard-shown? main-tab?]
   {:height     (cond
                  keyboard-shown? 0
-                 main-tab? tabs-height
-                 :else minimized-tabs-height)
+                 main-tab?       tabs-height
+                 :else           minimized-tabs-height)
    :align-self :stretch})