Merge pull request #470 from status-im/bug/#438

Swipe between Chats, Discover, Contacts

package.json

@@ -54,6 +54,7 @@
     "react-native-qrcode": "^0.2.2",
     "react-native-randombytes": "^2.1.0",
     "react-native-splash-screen": "^1.0.9",
+    "react-native-swiper": "1.5.3",
     "react-native-tcp": "^2.0.4",
     "react-native-udp": "^1.2.6",
     "react-native-vector-icons": "^2.0.3",

postinstall.sh

@@ -3,6 +3,7 @@
 # rn-nodeify
 # temporary hack due to https://github.com/facebook/react-native/issues/4968
 ./node_modules/.bin/rn-nodeify --install --hack;
+npm install --save react@15.3.1;
 npm install --save react-native-tcp@2.0.4;
 
 # symlink for re-natal

src/status_im/components/main_tabs.cljs

@@ -9,7 +9,8 @@
                                                 text
                                                 image
                                                 touchable-highlight
-                                                get-dimensions]]
+                                                get-dimensions
+                                                swiper]]
             [status-im.components.status-bar :refer [status-bar]]
             [status-im.components.drawer.view :refer [drawer-view]]
             [status-im.components.animation :as anim]
@@ -44,8 +45,8 @@
   (fn [_]
     (when-let [offsets @offsets]
       (let [from-value (:from offsets)
-            to-value (:to offsets)
+            to-value   (:to offsets)
-            to-tab-id @to-tab-id]
+            to-tab-id  @to-tab-id]
         (anim/set-value val from-value)
         (when to-value
           (anim/start
@@ -56,61 +57,55 @@
                 (when (.-finished arg)
                   (dispatch [:on-navigated-to-tab]))))))))))
 
-(defn get-tab-index-by-id [id]
+(def tab->index {:chat-list    0
-  (:index (first (filter #(= id (:view-id %)) tab-list))))
+                 :discovery    1
+                 :contact-list 2})
 
-(defn get-offsets [tab-id from-id to-id]
+(def index->tab (clojure.set/map-invert tab->index))
-  (let [tab (get-tab-index-by-id tab-id)
-        from (get-tab-index-by-id from-id)
-        to (get-tab-index-by-id to-id)]
-    (if (or (= tab from) (= tab to))
-      (cond
-        (or (nil? from) (= from to)) {:from 0}
-        (< from to) (if (= tab to)
-                      {:from window-width, :to 0}
-                      {:from 0, :to (- window-width)})
-        (< to from) (if (= tab to)
-                      {:from (- window-width), :to 0}
-                      {:from 0, :to window-width}))
-      {:from (- window-width)})))
 
-(defn tab-view-container [tab-id content]
+(defn get-tab-index [view-id]
-  (let [cur-tab-id (subscribe [:get :view-id])
+  (get tab->index view-id 0))
-        prev-tab-id (subscribe [:get :prev-tab-view-id])
+
-        offsets (reaction (get-offsets tab-id @prev-tab-id @cur-tab-id))
+(defn scroll-to [prev-view-id view-id]
-        anim-value (anim/create-value (- window-width))
+  (let [p (get-tab-index prev-view-id)
-        context {:offsets   offsets
+        n (get-tab-index view-id)]
-                 :val       anim-value
+    (- n p)))
-                 :tab-id    tab-id
+
-                 :to-tab-id cur-tab-id}
+(defn on-scroll-end [swiped?]
-        on-update (animation-logic context)]
+  (fn [_ state]
+    (let [{:strs [index]} (js->clj state)]
+      (reset! swiped? true)
+      (dispatch [:navigate-to-tab (index->tab index)]))))
+
+(defn main-tabs []
+  (let [view-id      (subscribe [:get :view-id])
+        prev-view-id (subscribe [:get :prev-view-id])
+        main-swiper  (atom nil)
+        swiped?      (atom false)]
     (r/create-class
-      {:component-did-mount
+      {:component-will-update
-       on-update
+       (fn []
-       :component-did-update
+         (if @swiped?
-       on-update
+           (reset! swiped? false)
+           (when @main-swiper
+             (let [to (scroll-to @prev-view-id @view-id)]
+               (.scrollBy @main-swiper to)))))
        :reagent-render
-       (fn [tab-id content]
+       (fn []
-         @offsets
+         [view common-st/flex
-         [animated-view {:style (st/tab-view-container anim-value)}
+          [status-bar {:type :main}]
-          content])})))
+          [view common-st/flex
-
+           [drawer-view
-(defn tab-view [{:keys [view-id screen]}]
+            [view {:style common-st/flex}
-  ^{:key view-id}
+             [swiper (merge
-  [tab-view-container view-id
+                       st/main-swiper
-   [screen]])
+                       {:index                  (get-tab-index @view-id)
-
+                        :loop                   false
-(defview main-tabs []
+                        :ref                    #(reset! main-swiper %)
-  [view-id [:get :view-id]
+                        :on-momentum-scroll-end (on-scroll-end swiped?)})
-   prev-view-id [:get :prev-view-id]
+              [chats-list]
-   tab-animation? [:get :prev-tab-view-id]]
+              [discovery]
-  [view common-st/flex
+              [contact-list]]
-   [status-bar {:type :main}]
+             [tabs {:selected-view-id @view-id
-   [view common-st/flex
+                    :prev-view-id     @prev-view-id
-    [drawer-view
+                    :tab-list         tab-list}]]]]])})))
-     [view {:style         common-st/flex
-            :pointerEvents (if tab-animation? :none :auto)}
-      (doall (map #(tab-view %) tab-list))
-      [tabs {:selected-view-id view-id
-             :prev-view-id     prev-view-id
-             :tab-list         tab-list}]]]]])

src/status_im/components/react.cljs

@@ -113,4 +113,4 @@
         (.openPicker (clj->js {:multiple false}))
         (.then images-fn))))
 
-
+(def swiper (adapt-class (js/require "react-native-swiper")))

src/status_im/components/tabs/styles.cljs

@@ -52,14 +52,13 @@
    :alignItems     :center
    :top            (if active? 0 8)})
 
-(defn tab-view-container [offset-x]
-  {:position       :absolute
-   :top            0
-   :left           0
-   :right          0
-   :bottom         0
-   :padding-bottom 60
-   :transform      [{:translateX offset-x}]})
-
 (defn animated-offset [value]
   {:top value})
+
+(def main-swiper
+  {:position         :absolute
+   :top              0
+   :left             0
+   :right            0
+   :bottom           83
+   :shows-pagination false})