search input animation with nativeDriver

src/status_im/ui/screens/home/filter/views.cljs

@@ -50,29 +50,32 @@
 
 (defonce search-input-state
   (reagent/atom {:show?  false
-                 :height (animation/create-value 0)}))
+                 :height (animation/create-value
+                          (- styles/search-input-height))}))
 
 (defn show-search!
   []
-  (swap! search-input-state assoc :show? true)
   (animation/start
-   (animation/timing (:height   @search-input-state)
-                     {:toValue  styles/search-input-height
-                      :duration 350
-                      :easing   (.out (animation/easing)
-                                      (.-quad (animation/easing)))})))
+   (animation/timing (:height @search-input-state)
+                     {:toValue         0
+                      :duration        350
+                      :easing          (.out (animation/easing)
+                                             (.-quad (animation/easing)))
+                      :useNativeDriver true})))
+
+(defn reset-height []
+  (animation/set-value (:height @search-input-state)
+                       (- styles/search-input-height)))
 
 (defn hide-search!
   []
-  (utils/set-timeout
-   #(swap! search-input-state assoc :show? false)
-   350)
   (animation/start
-   (animation/timing (:height   @search-input-state)
-                     {:toValue  0
-                      :duration 350
-                      :easing   (.in (animation/easing)
-                                     (.-quad (animation/easing)))})))
+   (animation/timing (:height @search-input-state)
+                     {:toValue         (- styles/search-input-height)
+                      :duration        350
+                      :easing          (.in (animation/easing)
+                                            (.-quad (animation/easing)))
+                      :useNativeDriver true})))
 
 (defn set-search-state-visible!
   [visible?]
@@ -82,7 +85,7 @@
                          styles/search-input-height
                          0)))
 
-(defn animated-search-input
+(defn search-input-wrapper
   [search-filter]
   (reagent/create-class
    {:component-will-unmount
@@ -92,20 +95,15 @@
        (set-search-state-visible! true))
     :reagent-render
     (fn [search-filter]
-      (let [{:keys [show? height]} @search-input-state]
-        (when (or show?
-                  search-filter)
-          [react/animated-view
-           {:style {:height height}}
-           [search-input search-filter
-            {:on-cancel #(do
-                           (re-frame/dispatch [:search/filter-changed nil])
-                           (hide-search!))
-             :on-focus  (fn [search-filter]
-                          (when-not search-filter
-                            (re-frame/dispatch [:search/filter-changed ""])))
-             :on-change (fn [text]
-                          (re-frame/dispatch [:search/filter-changed text]))}]])))}))
+      [search-input search-filter
+       {:on-cancel #(do
+                      (re-frame/dispatch [:search/filter-changed nil])
+                      (hide-search!))
+        :on-focus  (fn [search-filter]
+                     (when-not search-filter
+                       (re-frame/dispatch [:search/filter-changed ""])))
+        :on-change (fn [text]
+                     (re-frame/dispatch [:search/filter-changed text]))}])}))
 
 (defn home-filtered-items-list
   [chats]

src/status_im/ui/screens/home/styles.cljs

@@ -155,10 +155,13 @@
    :tint-color   :white})
 
 (def no-chats
-  {:flex              1
-   :align-items       :center
-   :justify-content   :center
-   :margin-horizontal 34})
+  {:flex               1
+   :align-items        :center
+   :justify-content    :center
+   :padding-horizontal 34
+   :align-self         :stretch
+   :background-color   :white
+   :transform          [{:translateY (- search-input-height)}]})
 
 (def no-chats-text
   {:text-align     :center

src/status_im/ui/screens/home/views.cljs

@@ -56,16 +56,18 @@
     [components.common/button {:on-press #(list-selection/open-share {:message (i18n/label :t/get-status-at)})
                                :label    (i18n/label :t/invite-friends)}]]])
 
-(defn home-items-view [_ _ _]
+(defn home-items-view [_ _ _ search-input-state]
   (let [previous-touch      (reagent/atom nil)
         scrolling-from-top? (reagent/atom true)]
+    (filter.views/reset-height)
     (fn [search-filter chats all-home-items]
       (if (not-empty search-filter)
         [filter.views/home-filtered-items-list chats]
-        [react/view
-         (merge {:style {:flex 1}}
-                (when (and @scrolling-from-top?
-                           (not (:show? @filter.views/search-input-state)))
+        [react/animated-view
+         (merge {:style {:flex 1
+                         :background-color :white
+                         :transform [{:translateY (:height @search-input-state)}]}}
+                (when @scrolling-from-top?
                   {:on-start-should-set-responder-capture
                    (fn [event]
                      (let [current-position  (.-pageY (.-nativeEvent event))
@@ -138,11 +140,11 @@
              :else
              [react/view {:style {:flex 1}}
               [connectivity/connectivity-view]
-              [filter.views/animated-search-input search-filter]
+              [filter.views/search-input-wrapper search-filter]
               (if (and (not search-filter)
                        (empty? all-home-items))
                 [home-empty-view]
-                [home-items-view search-filter chats all-home-items])])]
+                [home-items-view search-filter chats all-home-items filter.views/search-input-state])])]
       [home-action-button]]]))
 
 (views/defview home-wrapper []