Chats/Discover/Contacts tabs menu animation iOS (#488)

src/status_im/components/main_tabs.cljs

@@ -20,9 +20,8 @@
             [status-im.components.tabs.tabs :refer [tabs]]
             [status-im.components.tabs.styles :as st]
             [status-im.components.styles :as common-st]
-            [status-im.i18n :refer [label]]))
+            [status-im.i18n :refer [label]]
-
+            [taoensso.timbre :as log]))
-(def window-width (:width (get-dimensions "window")))
 
 (def tab-list
   [{:view-id :chat-list
@@ -71,17 +70,20 @@
         n (get-tab-index view-id)]
     (- n p)))
 
-(defn on-scroll-end [swiped?]
+(defn on-scroll-end [swiped? dragging?]
   (fn [_ state]
-    (let [{:strs [index]} (js->clj state)]
+    (when @dragging?
-      (reset! swiped? true)
+      (reset! dragging? false)
-      (dispatch [:navigate-to-tab (index->tab index)]))))
+      (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)
+        main-swiper  (r/atom nil)
-        swiped?      (atom false)]
+        swiped?      (r/atom false)
+        dragging?    (r/atom false)]
     (r/create-class
       {:component-will-update
        (fn []
@@ -102,7 +104,8 @@
                        {:index                  (get-tab-index @view-id)
                         :loop                   false
                         :ref                    #(reset! main-swiper %)
-                        :on-momentum-scroll-end (on-scroll-end swiped?)})
+                        :onScrollBeginDrag      #(reset! dragging? true)
+                        :on-momentum-scroll-end (on-scroll-end swiped? dragging?)})
               [chats-list]
               [discovery]
               [contact-list]]

src/status_im/components/tabs/styles.cljs

@@ -4,16 +4,15 @@
 (def tabs-height 60)
 (def tab-height 58)
 
-(defn tabs-container [hidden? animation? offset-y]
+(defn tabs-container [hidden?]
   {:position        :absolute
    :bottom          0
    :left            0
    :right           0
    :height          tabs-height
    :backgroundColor color-white
-   :marginBottom    (if (or hidden? animation?)
+   :marginBottom    (if hidden? (- tabs-height) 0)
-                      (- tabs-height) 0)
+   :transform       [{:translateY 1}]})
-   :transform       [{:translateY (if animation? offset-y 1)}]})
 
 (def bottom-gradient
   {:position :absolute

src/status_im/components/tabs/tabs.cljs

@@ -28,15 +28,10 @@
           (swap! was-hidden? not)
           (anim/start
             (anim/timing val {:toValue  to-value
-                              :duration 300})
+                              :duration 300})))))))
-            (fn [e]
-              ;; if to-value was changed, then new animation has started
-              (when (= to-value (if @hidden? 0 (- st/tabs-height)))
-                (dispatch [:set-animation :tabs-bar-animation? false])))))))))
 
 (defn tabs-container [& children]
   (let [chats-scrolled? (subscribe [:get :chats-scrolled?])
-        animation? (subscribe [:animations :tabs-bar-animation?])
         tabs-bar-value (subscribe [:animations :tabs-bar-value])
         context {:hidden?    chats-scrolled?
                  :val        @tabs-bar-value}
@@ -50,11 +45,11 @@
        :reagent-render
        (fn [& children]
          @chats-scrolled?
-         (into [animated-view {:style         (st/tabs-container @chats-scrolled? @animation? @tabs-bar-value)
+         (into [animated-view {:style         (st/tabs-container @chats-scrolled?)
                                :pointerEvents (if @chats-scrolled? :none :auto)}]
                children))})))
 
-(defn tabs [{:keys [tab-list selected-view-id prev-view-id]}]
+(defn tabs [{:keys [tab-list selected-view-id prev-view-id swiper]}]
   [tabs-container
    [view st/tabs-inner-container
     (doall (map-indexed #(create-tab %1 %2 selected-view-id prev-view-id) tab-list))]])