fix #438

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]
@@ -56,61 +57,55 @@
                 (when (.-finished arg)
                   (dispatch [:on-navigated-to-tab]))))))))))
 
-(defn get-tab-index-by-id [id]
-  (:index (first (filter #(= id (:view-id %)) tab-list))))
+(def tab->index {:chat-list    0
+                 :discovery    1
+                 :contact-list 2})
 
-(defn get-offsets [tab-id from-id to-id]
-  (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)})))
+(def index->tab (clojure.set/map-invert tab->index))
 
-(defn tab-view-container [tab-id content]
-  (let [cur-tab-id (subscribe [:get :view-id])
-        prev-tab-id (subscribe [:get :prev-tab-view-id])
-        offsets (reaction (get-offsets tab-id @prev-tab-id @cur-tab-id))
-        anim-value (anim/create-value (- window-width))
-        context {:offsets   offsets
-                 :val       anim-value
-                 :tab-id    tab-id
-                 :to-tab-id cur-tab-id}
-        on-update (animation-logic context)]
+(defn get-tab-index [view-id]
+  (get tab->index view-id 0))
+
+(defn scroll-to [prev-view-id view-id]
+  (let [p (get-tab-index prev-view-id)
+        n (get-tab-index view-id)]
+    (- n p)))
+
+(defn on-scroll-end [swiped?]
+  (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
-       on-update
-       :component-did-update
-       on-update
+      {:component-will-update
+       (fn []
+         (if @swiped?
+           (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]
-         @offsets
-         [animated-view {:style (st/tab-view-container anim-value)}
-          content])})))
-
-(defn tab-view [{:keys [view-id screen]}]
-  ^{:key view-id}
-  [tab-view-container view-id
-   [screen]])
-
-(defview main-tabs []
-  [view-id [:get :view-id]
-   prev-view-id [:get :prev-view-id]
-   tab-animation? [:get :prev-tab-view-id]]
+       (fn []
          [view common-st/flex
           [status-bar {:type :main}]
           [view common-st/flex
            [drawer-view
-     [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}]]]]])
+            [view {:style common-st/flex}
+             [swiper (merge
+                       st/main-swiper
+                       {:index                  (get-tab-index @view-id)
+                        :loop                   false
+                        :ref                    #(reset! main-swiper %)
+                        :on-momentum-scroll-end (on-scroll-end swiped?)})
+              [chats-list]
+              [discovery]
+              [contact-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]
+(defn animated-offset [value]
+  {:top value})
+
+(def main-swiper
   {:position         :absolute
    :top              0
    :left             0
    :right            0
-   :bottom         0
-   :padding-bottom 60
-   :transform      [{:translateX offset-x}]})
-
-(defn animated-offset [value]
-  {:top value})
+   :bottom           83
+   :shows-pagination false})