Merge pull request #498 from status-im/bug/#414

React Native upgrade (0.38.0), fix for unhandled promise rejection (#414, #499)

ios/StatusIm.xcodeproj/project.pbxproj

@@ -57,6 +57,7 @@
 		B24FC7FD1DE7195700D694FF /* Social.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FC1DE7195700D694FF /* Social.framework */; };
 		B24FC7FF1DE7195F00D694FF /* MessageUI.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7FE1DE7195F00D694FF /* MessageUI.framework */; };
 		B24FC8001DE71C0E00D694FF /* libSplashScreen.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B24FC7F21DE718EF00D694FF /* libSplashScreen.a */; };
+		B2A5F45C1DEC36BB00174F4D /* libRCTAnimation.a in Frameworks */ = {isa = PBXBuildFile; fileRef = B2A5F4381DEC36B200174F4D /* libRCTAnimation.a */; };
 		B2F2D1BC1D9D531B00B7B453 /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */; };
 		B45B40B471414274A7A83185 /* libRCTContacts.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 3384AFA9609A409B81928AD5 /* libRCTContacts.a */; };
 		BA68A2377A20496EA737000D /* libz.tbd in Frameworks */ = {isa = PBXBuildFile; fileRef = 4E586E1B0E544F64AA9F5BD1 /* libz.tbd */; };
@@ -321,6 +322,20 @@
 			remoteGlobalIDString = 134814201AA4EA6300B7C361;
 			remoteInfo = RNShare;
 		};
+		B2A5F4371DEC36B200174F4D /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 134814201AA4EA6300B7C361;
+			remoteInfo = RCTAnimation;
+		};
+		B2A5F4391DEC36B200174F4D /* PBXContainerItemProxy */ = {
+			isa = PBXContainerItemProxy;
+			containerPortal = B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */;
+			proxyType = 2;
+			remoteGlobalIDString = 2D2A28201D9B03D100D4039D;
+			remoteInfo = "RCTAnimation-tvOS";
+		};
 		CE4E319D1D8693090033ED64 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 5E5A7625B76441D984EA8C0D /* RCTImageResizer.xcodeproj */;
@@ -417,6 +432,7 @@
 		B24FC7F51DE7190C00D694FF /* RNShare.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RNShare.xcodeproj; path = "../node_modules/react-native-share/ios/RNShare.xcodeproj"; sourceTree = "<group>"; };
 		B24FC7FC1DE7195700D694FF /* Social.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = Social.framework; path = System/Library/Frameworks/Social.framework; sourceTree = SDKROOT; };
 		B24FC7FE1DE7195F00D694FF /* MessageUI.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = MessageUI.framework; path = System/Library/Frameworks/MessageUI.framework; sourceTree = SDKROOT; };
+		B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */ = {isa = PBXFileReference; lastKnownFileType = "wrapper.pb-project"; name = RCTAnimation.xcodeproj; path = "../node_modules/react-native/Libraries/NativeAnimation/RCTAnimation.xcodeproj"; sourceTree = "<group>"; };
 		B2F2D1BB1D9D531B00B7B453 /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = StatusIm/Images.xcassets; sourceTree = "<group>"; };
 		B3B19223008342D096AA356E /* Octicons.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = Octicons.ttf; path = "../node_modules/react-native-vector-icons/Fonts/Octicons.ttf"; sourceTree = "<group>"; };
 		C2A4E93F6B154AEFA3485B45 /* libTcpSockets.a */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = archive.ar; path = libTcpSockets.a; sourceTree = "<group>"; };
@@ -444,6 +460,7 @@
 			buildActionMask = 2147483647;
 			files = (
 				B24FC8001DE71C0E00D694FF /* libSplashScreen.a in Frameworks */,
+				B2A5F45C1DEC36BB00174F4D /* libRCTAnimation.a in Frameworks */,
 				B24FC7FF1DE7195F00D694FF /* MessageUI.framework in Frameworks */,
 				B24FC7FD1DE7195700D694FF /* Social.framework in Frameworks */,
 				B24FC7FB1DE7192200D694FF /* libRNShare.a in Frameworks */,
@@ -743,6 +760,7 @@
 		832341AE1AAA6A7D00B99B32 /* Libraries */ = {
 			isa = PBXGroup;
 			children = (
+				B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */,
 				B24FC7F51DE7190C00D694FF /* RNShare.xcodeproj */,
 				3A7EB0491DD9CABC00A4FCC8 /* SplashScreen.xcodeproj */,
 				20A5C94B1D927137002C4965 /* imageCropPicker.xcodeproj */,
@@ -858,6 +876,15 @@
 			name = Products;
 			sourceTree = "<group>";
 		};
+		B2A5F4301DEC36B200174F4D /* Products */ = {
+			isa = PBXGroup;
+			children = (
+				B2A5F4381DEC36B200174F4D /* libRCTAnimation.a */,
+				B2A5F43A1DEC36B200174F4D /* libRCTAnimation-tvOS.a */,
+			);
+			name = Products;
+			sourceTree = "<group>";
+		};
 		CE4E31941D8693090033ED64 /* Products */ = {
 			isa = PBXGroup;
 			children = (
@@ -954,6 +981,10 @@
 					ProductGroup = 00C302A81ABCB8CE00DB3ED1 /* Products */;
 					ProjectRef = 00C302A71ABCB8CE00DB3ED1 /* RCTActionSheet.xcodeproj */;
 				},
+				{
+					ProductGroup = B2A5F4301DEC36B200174F4D /* Products */;
+					ProjectRef = B2A5F42F1DEC36B200174F4D /* RCTAnimation.xcodeproj */;
+				},
 				{
 					ProductGroup = 20B7D1111D3F74CD00B70F14 /* Products */;
 					ProjectRef = 9F1854E6D9654226B1FC8308 /* RCTCamera.xcodeproj */;
@@ -1309,6 +1340,20 @@
 			remoteRef = B24FC7F91DE7190C00D694FF /* PBXContainerItemProxy */;
 			sourceTree = BUILT_PRODUCTS_DIR;
 		};
+		B2A5F4381DEC36B200174F4D /* libRCTAnimation.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = libRCTAnimation.a;
+			remoteRef = B2A5F4371DEC36B200174F4D /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
+		B2A5F43A1DEC36B200174F4D /* libRCTAnimation-tvOS.a */ = {
+			isa = PBXReferenceProxy;
+			fileType = archive.ar;
+			path = "libRCTAnimation-tvOS.a";
+			remoteRef = B2A5F4391DEC36B200174F4D /* PBXContainerItemProxy */;
+			sourceTree = BUILT_PRODUCTS_DIR;
+		};
 		CE4E319E1D8693090033ED64 /* libRCTImageResizer.a */ = {
 			isa = PBXReferenceProxy;
 			fileType = archive.ar;

package.json

@@ -33,7 +33,7 @@
     "querystring-es3": "^0.2.1",
     "re-natal": "0.2.38",
     "react": "^15.3.1",
-    "react-native": "^0.36.0",
+    "react-native": "^0.38.0",
     "react-native-action-button": "2.0.13",
     "react-native-android-sms-listener": "github:adrian-tiberius/react-native-android-sms-listener#listener-bugfix",
     "react-native-camera": "git+https://github.com/alwx/react-native-camera.git",

src/status_im/accounts/screen.cljs

@@ -66,7 +66,7 @@
                                    :handler (if show-back? #(dispatch [:navigate-back]) nil)}
                 :custom-content   [toolbar-title]
                 :actions          [{:image   {:style icon-search}
-                                    :handler #()}]}]
+                                    :handler #()}]}]]
      [list-view {:dataSource            (lw/to-datasource accounts)
                  :enableEmptySections   true
                  :renderRow             render-row
@@ -87,4 +87,4 @@
                  :style  st/icon-plus}]
          [text {:style st/add-account-text
                 :font  :default}
-           (label :t/add-account)]]]]]]]))
+          (label :t/add-account)]]]]]]))

src/status_im/accounts/styles.cljs

@@ -19,7 +19,7 @@
   (merge {:justifyContent :center}
          ;; todo this will not work with landscape and looks bad
          (when (< (* 69 (+ 2 cnt)) (:height (r/get-dimensions "window")))
-           {:flex 1})))
+           {:flex-grow 1})))
 
 (def account-list
   {:margin-bottom 20})
@@ -122,14 +122,14 @@
 ;wallet-qr-code.cljs
 
 (def wallet-qr-code
-  {:flex           1
+  {:flex-grow      1
    :flex-direction :column})
 
 (def account-toolbar
   {:background-color "#2f3031"})
 
 (def wallet-account-container
-  {:flex           1
+  {:flex-grow      1
    :flexDirection  :row
    :height         69
    :alignItems     :center
@@ -137,7 +137,7 @@
 
 (def qr-code
   {:background-color "#2f3031"
-   :flex             1
+   :flex-grow        1
    :align-items      :center
    :justify-content  :center})
 
@@ -158,7 +158,7 @@
    })
 
 (def done-button
-  {:flex             1
+  {:flex-grow        1
    :flex-direction   :column
    :align-items      :center
    :justify-content  :center

src/status_im/android/platform.cljs

@@ -75,6 +75,7 @@
   {:component-styles  component-styles
    :fonts             fonts
    :list-selection-fn show-dialog
+   :tabs              {:tab-shadows? true}
    :chats             {:action-button?       true
                        :new-chat-in-toolbar? false}
    :contacts          {:action-button?          true

src/status_im/chats_list/screen.cljs

@@ -23,7 +23,6 @@
             [status-im.i18n :refer [label]]
             [status-im.chats-list.styles :as st]
             [status-im.utils.platform :refer [platform-specific]]
-            [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]]
             [status-im.components.sync-state.offline :refer [offline-view]]
             [status-im.components.tabs.styles :refer [tabs-height]]))
 
@@ -89,5 +88,4 @@
                :style           st/list-container}]
    (when (get-in platform-specific [:chats :action-button?])
      [chats-action-button])
-   [bottom-gradient]
    [offline-view]])

src/status_im/chats_list/styles.cljs

@@ -132,5 +132,5 @@
    :right     0
    :height    230
    :width     230
-   :bottom    0
+   :bottom    24
    :transform [{:translateY (if animation? offset-y 1)}]})

src/status_im/components/drawer/view.cljs

@@ -100,9 +100,9 @@
                                    ;; TODO not implemented
                                    )}]
             [menu-item {:name    (label :t/discover)
-                        :handler #(dispatch [:navigate-to :discover])}]
+                        :handler #(dispatch [:navigate-to-tab :discover])}]
             [menu-item {:name    (label :t/contacts)
-                        :handler #(dispatch [:navigate-to :contact-list])}]]
+                        :handler #(dispatch [:navigate-to-tab :contact-list])}]]
            (when (zero? @keyboard-height)
              [text {:style st/feedback
                     :font  :default} (label :t/feedback)])

src/status_im/components/main_tabs.cljs

@@ -13,6 +13,7 @@
             [status-im.components.status-bar :refer [status-bar]]
             [status-im.components.drawer.view :refer [drawer-view]]
             [status-im.components.animation :as anim]
+            [status-im.components.tabs.bottom-shadow :refer [bottom-shadow-view]]
             [status-im.chats-list.screen :refer [chats-list]]
             [status-im.discover.screen :refer [discover]]
             [status-im.contacts.screen :refer [contact-list]]
@@ -110,4 +111,5 @@
               [contact-list]]
              [tabs {:selected-view-id @view-id
                     :prev-view-id     @prev-view-id
-                    :tab-list         tab-list}]]]]])})))
+                    :tab-list         tab-list}]
+             [bottom-shadow-view]]]]])})))

src/status_im/components/tabs/bottom_gradient.cljs

@@ -1,11 +0,0 @@
-(ns status-im.components.tabs.bottom-gradient
-  (:require [status-im.components.tabs.styles :as st]
-            [status-im.components.react :refer [linear-gradient]]
-            [status-im.utils.platform :refer [platform-specific]]))
-
-(defn bottom-gradient []
-  [linear-gradient {:locations [0 0.8 1]
-                    :colors    ["rgba(24, 52, 76, 0)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
-                    :style     (merge
-                                 st/bottom-gradient
-                                 (get-in platform-specific [:component-styles :bottom-gradient]))}])

src/status_im/components/tabs/bottom_shadow.cljs

@@ -0,0 +1,12 @@
+(ns status-im.components.tabs.bottom-shadow
+  (:require [status-im.components.tabs.styles :as st]
+            [status-im.components.react :refer [linear-gradient]]
+            [status-im.utils.platform :refer [platform-specific]]))
+
+(defn bottom-shadow-view []
+  (if (get-in platform-specific [:tabs :tab-shadows?])
+    [linear-gradient {:locations [0 0.8 1]
+                      :colors    ["rgba(24, 52, 76, 0)" "rgba(24, 52, 76, 0.085)" "rgba(24, 52, 76, 0.165)"]
+                      :style     (merge
+                                   st/bottom-gradient
+                                   (get-in platform-specific [:component-styles :bottom-gradient]))}]))

src/status_im/components/tabs/styles.cljs

@@ -1,8 +1,14 @@
 (ns status-im.components.tabs.styles
   (:require [status-im.components.styles :refer [color-white]]))
 
-(def tabs-height 60)
+(def tabs-height 56)
-(def tab-height 58)
+(def tab-height (- tabs-height 1))
+
+(def bottom-gradient
+  {:position :absolute
+   :bottom   55
+   :left     0
+   :right    0})
 
 (defn tabs-container [hidden?]
   {:position         :absolute
@@ -10,21 +16,18 @@
    :left             0
    :right            0
    :height           tabs-height
-   :backgroundColor color-white
+   :background-color color-white
-   :marginBottom    (if hidden? (- tabs-height) 0)
+   :margin-bottom    (if hidden? (- tabs-height) 0)
    :transform        [{:translateY 1}]})
 
-(def bottom-gradient
+(def tabs-container-line
-  {:position :absolute
+  {:border-top-width 1
-   :bottom 0
+   :border-top-color "#D7D7D7"})
-   :left 0
-   :right 0})
 
 (def tabs-inner-container
   {:flexDirection   :row
    :height          tab-height
    :opacity         1
-   :backgroundColor :white
    :justifyContent  :center
    :alignItems      :center})
 
@@ -37,27 +40,32 @@
 (def tab-title
   {:font-size  12
    :height     16
+   :min-width  60
+   :text-align :center
    :color      "#6e93d8"})
 
 (def tab-icon
   {:width        24
    :height       24
-   :marginBottom 1})
+   :marginBottom 1
+   :align-self   :center})
 
 (defn tab-container [active?]
   {:flex             1
    :height           tab-height
    :justifyContent   :center
    :alignItems       :center
-   :top            (if active? 0 8)})
+   :padding-top      (if active? 0 16)})
 
 (defn animated-offset [value]
-  {:top value})
+  {:top value
+   :justifyContent :center
+   :alignItems     :center})
 
 (def main-swiper
   {:position         :absolute
    :top              0
    :left             0
    :right            0
-   :bottom           83
+   :bottom           tabs-height
    :shows-pagination false})

src/status_im/components/tabs/tabs.cljs

@@ -11,7 +11,8 @@
             [reagent.core :as r]
             [status-im.components.tabs.styles :as st]
             [status-im.components.tabs.tab :refer [tab]]
-            [status-im.components.animation :as anim]))
+            [status-im.components.animation :as anim]
+            [status-im.utils.platform :refer [platform-specific]]))
 
 (defn create-tab [index data selected-view-id prev-view-id]
   (let [data (merge data {:key              index
@@ -33,6 +34,7 @@
 (defn tabs-container [& children]
   (let [chats-scrolled? (subscribe [:get :chats-scrolled?])
         tabs-bar-value  (subscribe [:animations :tabs-bar-value])
+        shadows?        (get-in platform-specific [:tabs :tab-shadows?])
         context         {:hidden? chats-scrolled?
                          :val     @tabs-bar-value}
         on-update       (animation-logic context)]
@@ -45,7 +47,8 @@
        :reagent-render
        (fn [& children]
          @chats-scrolled?
-         (into [animated-view {:style         (st/tabs-container @chats-scrolled?)
+         (into [animated-view {:style         (merge (st/tabs-container @chats-scrolled?)
+                                                     (if-not shadows? st/tabs-container-line))
                                :pointerEvents (if @chats-scrolled? :none :auto)}]
                children))})))
 

src/status_im/components/text_field/styles.cljs

@@ -6,7 +6,7 @@
   {:position       :relative
    :height         72
    :padding-top    30
-   :padding-bottom 7})
+   :padding-bottom 34})
 
 (def text-input
   {:font-size           16

src/status_im/contacts/screen.cljs

@@ -22,7 +22,6 @@
                                                  hamburger-icon
                                                  icon-search
                                                  create-icon]]
-            [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]]
             [status-im.contacts.styles :as st]
             [status-im.i18n :refer [label]]
             [status-im.utils.platform :refer [platform-specific]]))
@@ -148,5 +147,4 @@
           [react/icon :group_big st/empty-contacts-icon]
           [text {:style st/empty-contacts-text} (label :t/no-contacts)]])
        (when (get-in platform-specific [:contacts :action-button?])
-         [contacts-action-button])
+         [contacts-action-button])])))
-       [bottom-gradient]])))

src/status_im/contacts/styles.cljs

@@ -200,7 +200,7 @@
 
 (def buttons-container
   {:position :absolute
-   :bottom   0
+   :bottom   24
    :right    0
    :width    220
    :height   170})

src/status_im/discover/screen.cljs

@@ -11,7 +11,6 @@
     [status-im.components.toolbar.view :refer [toolbar]]
     [status-im.components.drawer.view :refer [open-drawer]]
     [status-im.discover.styles :as st]
-    [status-im.components.tabs.bottom-gradient :refer [bottom-gradient]]
     [status-im.i18n :refer [label]]
     [status-im.components.carousel.carousel :refer [carousel]]
     [status-im.discover.views.popular-list :refer [discover-popular-list]]
@@ -107,5 +106,4 @@
       ;; todo change icon
       [icon :group_big contacts-styles/empty-contacts-icon]
       [text {:style contacts-styles/empty-contacts-text}
-       (label :t/no-statuses-discovered)]])
+       (label :t/no-statuses-discovered)]])])
-   [bottom-gradient]])

src/status_im/ios/platform.cljs

@@ -82,6 +82,7 @@
   {:component-styles  component-styles
    :fonts             fonts
    :list-selection-fn show-action-sheet
+   :tabs              {:tab-shadows? false}
    :chats             {:action-button?       false
                        :new-chat-in-toolbar? true}
    :contacts          {:action-button?          false