WIP rework tabbar to unify API in iOs and Android

status-im · Jan 29, 2020 · 67ff9d6 · 67ff9d6
1 parent 16cf8ae
commit 67ff9d6
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 77 deletions.
diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml
@@ -38,7 +38,7 @@
                 android:name=".MainActivity"
                 android:label="@string/app_name"
                 android:screenOrientation="portrait"
-                android:windowSoftInputMode="adjustResize"
+            android:windowSoftInputMode="adjustPan"
                 android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
                 android:resizeableActivity="false"
                 android:launchMode="singleTask">

diff --git a/src/status_im/android/core.cljs b/src/status_im/android/core.cljs
@@ -1,6 +1,7 @@
 (ns status-im.android.core
   (:require [reagent.core :as reagent]
             [re-frame.core :refer [subscribe dispatch dispatch-sync]]
+            [oops.core :refer [ocall]]
             status-im.utils.db
             status-im.ui.screens.db
             status-im.ui.screens.events
@@ -41,8 +42,7 @@
                         (when-not (zero? @keyboard-height)
                           (dispatch [:set :keyboard-height 0]))))
         (.hide react/splash-screen)
-        ;; TODO Temporarily comment away due to current bug https://github.com/kmagiera/react-native-screens/issues/54
-                                        ;(.useScreens rn-dependencies/react-native-screens)
+        (ocall rn-dependencies/react-native-screens "enableScreens")
         (.addEventListener react/app-state "change" app-state-change-handler)
         (.addEventListener rn-dependencies/react-native-languages "change" on-languages-change)
         (.addEventListener rn-dependencies/react-native-shake
@@ -57,6 +57,6 @@
       :reagent-render views/main})))
 
 (defn init []
-  (status/set-soft-input-mode status/adjust-resize)
+  (status/set-soft-input-mode 32)
   (core/init app-root)
   (snoopy/subscribe!))
diff --git a/src/status_im/ui/components/tabbar/core.cljs b/src/status_im/ui/components/tabbar/core.cljs
@@ -6,7 +6,6 @@
    [status-im.ui.components.react :as react]
    [status-im.utils.platform :as platform]
    [status-im.ui.components.icons.vector-icons :as vector-icons]
-   [status-im.ui.components.common.common :as components.common]
    [status-im.ui.components.badge :as badge]
    [status-im.i18n :as i18n]
    [re-frame.core :as re-frame]))
@@ -102,25 +101,6 @@
     (animate visible? 150 1)
     (animate visible? 150 tabs.styles/minimized-tab-ratio)))
 
-(defn tabs-animation-wrapper-ios
-  [content]
-  [react/view {:style tabs.styles/title-cover-wrapper-ios}
-   [react/view
-    content
-    (when platform/iphone-x?
-      [react/view
-       {:style tabs.styles/ios-titles-cover}])]])
-
-(defn tabs-animation-wrapper-android
-  [keyboard-shown? view-id content]
-  [react/view
-   {:style (tabs.styles/animation-wrapper
-            keyboard-shown?
-            (main-tab? view-id))}
-   [react/view
-    {:style tabs.styles/title-cover-wrapper-android}
-    content]])
-
 (defn tabs-animation-wrapper [keyboard-shown? view-id tab]
   (reagent.core/create-class
    {:component-will-update
@@ -134,35 +114,25 @@
       (when-not (contains? #{:enter-pin-login
                              :enter-pin-sign
                              :enter-pin-settings} view-id)
-        (case platform/os
-          "ios" [tabs-animation-wrapper-ios
-                 [react/animated-view
-                  {:style (tabs.styles/animated-container visible? keyboard-shown?)}
-                  [tabs tab]]]
-          "android" [tabs-animation-wrapper-android
-                     keyboard-shown?
-                     view-id
-                     [react/animated-view
-                      {:style (tabs.styles/animated-container visible? keyboard-shown?)}
-                      [tabs tab]]]
-          "desktop"
-          [tabs-animation-wrapper-android
-           keyboard-shown?
-           view-id
-           [react/animated-view
-            {:style (tabs.styles/animated-container visible? keyboard-shown?)}
-            [tabs tab]]])))}))
 
-(def disappearance-duration 150)
-(def appearance-duration 100)
+        [react/view {:style tabs.styles/title-cover-wrapper}
+         [react/view
+          [react/animated-view {:style (tabs.styles/animated-container visible? keyboard-shown?)}
+           [tabs tab]]
+          (when platform/iphone-x?
+            [react/view
+             {:style tabs.styles/ios-titles-cover}])]]))}))
+
+(def disappearance-duration 0)
+(def appearance-duration 0)
 
 (defn tabbar [_ view-id]
   (let [keyboard-shown? (reagent/atom false)
         listeners       (atom [])]
     (reagent/create-class
      {:component-did-mount
       (fn []
-        (when platform/android?
+        (when false  ;; platform/android?
           (reset!
            listeners
            [(.addListener react/keyboard  "keyboardDidShow"

diff --git a/src/status_im/ui/components/tabbar/styles.cljs b/src/status_im/ui/components/tabbar/styles.cljs
@@ -7,7 +7,7 @@
 (def tabs-height
   (cond
     platform/android? 52
-    platform/ios? 52
+    platform/ios?     52
     platform/desktop? 36))
 
 (def minimized-tabs-height 36)
@@ -17,8 +17,6 @@
 (def minimized-tab-ratio
   (/ minimized-tabs-height tabs-height))
 
-(def tab-height (dec tabs-height))
-
 (def tabs-container
   {:flex-direction   :row
    :height           tabs-height
@@ -103,21 +101,17 @@
                 :shadow-color     "rgba(0, 9, 26, 0.12)"}})
 
 (def tabs
-  {:height         tabs-height
-   :align-self     :stretch
-   :padding-left   8
-   :padding-right  8
-   :flex-direction :row})
+  {:height             tabs-height
+   :align-self         :stretch
+   :padding-horizontal 8
+   :flex-direction     :row})
 
 (defn animated-container [visible? keyboard-shown?]
   {:bottom           0
    :left             0
    :right            0
    :background-color :white
    :elevation        8
-   :position         (when (or platform/ios?
-                               keyboard-shown?)
-                       :absolute)
    :transform        [{:translateY
                        (animation/interpolate
                         visible?
@@ -133,23 +127,6 @@
    :right            0
    :left             0})
 
-(def title-cover-wrapper-ios
-  {:left             0
-   :right            0
-   :bottom           0
-   :padding-bottom   (if platform/iphone-x? 34 0)
-   :position         :absolute
+(def title-cover-wrapper
+  {:padding-bottom   (if platform/iphone-x? 34 0)
    :background-color :white})
-
-(def title-cover-wrapper-android
-  {:left     0
-   :right    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)
-   :align-self :stretch})
diff --git a/src/status_im/ui/screens/wallet/transactions/styles.cljs b/src/status_im/ui/screens/wallet/transactions/styles.cljs
@@ -5,7 +5,7 @@
 
 (defn tab [active?]
   {:flex                1
-   :height              tabs.styles/tab-height
+   :height              tabs.styles/tabs-height
    :justify-content     :center
    :align-items         :center
    :padding-bottom      (if active? 0 1)
@@ -16,7 +16,7 @@
 
 (def tabs-container
   {:flex-direction :row
-   :height         tabs.styles/tab-height})
+   :height         tabs.styles/tabs-height})
 
 (defn tab-title
   [active?]