command suggestions and parameters animation with native driver

src/status_im/ui/screens/chat/input/animations/expandable.cljs

@@ -9,21 +9,31 @@
 
 (def top-offset 100)
 
-(defn expandable-view-on-update [anim-value animation-height]
-  (when animation-height
-    (animation/start
-     (animation/spring anim-value {:toValue  animation-height
-                                   :friction 10
-                                   :tension  60}))))
+(defn expandable-view-on-update [anim-value]
+  (animation/start
+   (animation/spring anim-value {:toValue         -53
+                                 :friction        10
+                                 :tension         60
+                                 :useNativeDriver true})))
 
-(defview expandable-view [{:keys [key]} & elements]
-  (letsubs [anim-value         (animation/create-value 0)
-            input-height       [:chats/current-chat-ui-prop :input-height]
+(defview expandable-view [_ & elements]
+  (letsubs [;; Default value of translateY is 104, it is sufficient to
+            ;; hide two commands below an input view.
+            ;; With bigger view like assets parameter animation looks good
+            ;; enough too, even if initially the view isn't fully covered by
+            ;; input. It might be inferred for each case but it would require
+            ;; more efforts and will not change too much the way how animation
+            ;; looks atm.
+            anim-value         (animation/create-value 104)
             input-focused?     [:chats/current-chat-ui-prop :input-focused?]
             messages-focused?  [:chats/current-chat-ui-prop :messages-focused?]
+            input-height       [:chats/current-chat-ui-prop :input-height]
             chat-input-margin  [:chats/input-margin]
-            keyboard-height    [:keyboard-height]
-            chat-layout-height [:layout-height]]
+            chat-layout-height [:layout-height]
+            keyboard-height    [:keyboard-height]]
+    {:component-did-mount
+     (fn []
+       (expandable-view-on-update anim-value))}
     (let [input-height (or input-height (+ input-style/padding-vertical
                                            input-style/min-input-height
                                            input-style/padding-vertical
@@ -31,9 +41,8 @@
           bottom       (+ input-height chat-input-margin)
           max-height   (- chat-layout-height (when platform/ios? keyboard-height) input-height top-offset)]
       [react/view style/overlap-container
-       [react/animated-view {:style (style/expandable-container anim-value bottom max-height)}
+       [react/animated-view {:style (style/expandable-container anim-value keyboard-height max-height)}
         (into [react/scroll-view {:keyboard-should-persist-taps :always
-                                  :on-content-size-change       #(expandable-view-on-update anim-value %2)
                                   :bounces                      false}]
               (when (or input-focused? (not messages-focused?))
                 elements))]])))

src/status_im/ui/screens/chat/input/parameter_box.cljs

@@ -13,7 +13,6 @@
 (defview parameter-box-view []
   (letsubs [show-box? [:chats/show-parameter-box?]]
     (when show-box?
-      [react/view]
       [expandable/expandable-view {:key :parameter-box}
        ;; TODO need to add the whole payload (and details about previous parameters?)
        [parameter-box-container]])))

src/status_im/ui/screens/chat/input/suggestions.cljs

@@ -17,11 +17,11 @@
 
 (defview suggestions-view []
   (letsubs [available-commands [:chats/available-commands]]
-    [expandable/expandable-view {:key :suggestions}
-     [react/view
-      [react/scroll-view {:keyboard-should-persist-taps :always
-                          :bounces                      false}
-       (when (seq available-commands)
+    (when (seq available-commands)
+      [expandable/expandable-view {:key :suggestions}
+       [react/view
+        [react/scroll-view {:keyboard-should-persist-taps :always
+                            :bounces                      false}
          (map-indexed
           (fn [i {:keys [type] :as command}]
             ^{:key i}
@@ -30,4 +30,4 @@
                               :description         (commands/command-description type)
                               :last?               (= i (dec (count available-commands)))
                               :accessibility-label (commands/accessibility-label type)}])
-          available-commands))]]]))
+          available-commands)]]])))

src/status_im/ui/screens/chat/styles/animations.cljs

@@ -1,6 +1,7 @@
 (ns status-im.ui.screens.chat.styles.animations
   (:require [status-im.ui.components.styles :as common]
-            [status-im.ui.components.colors :as colors]))
+            [status-im.ui.components.colors :as colors]
+            [status-im.utils.platform :as platform]))
 
 (def header-draggable-icon "rgba(73, 84, 93, 0.23)")
 
@@ -11,19 +12,21 @@
    :right    0
    :bottom   0})
 
-(defn expandable-container [anim-value bottom max-height]
+(defn expandable-container [anim-value keyboard-height max-height]
   {:background-color colors/white
-   :height           anim-value
    :left             0
    :right            0
-   :bottom           bottom
+   :bottom           (if platform/ios?
+                       (- keyboard-height 72)
+                       0)
    :position         :absolute
    :elevation        2
    :shadow-offset    {:width 0 :height 1}
    :shadow-radius    12
    :shadow-opacity   0.12
    :shadow-color     colors/white
-   :max-height       max-height})
+   :max-height       max-height
+   :transform        [{:translateY anim-value}]})
 
 (def header-container
   {:min-height       19