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

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

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})