dapp permissions sheet animation with native driver

src/status_im/ui/screens/browser/permissions/views.cljs

@@ -16,23 +16,27 @@
   [bottom-anim-value alpha-value]
   (anim/start
    (anim/parallel
-    [(anim/spring bottom-anim-value {:toValue -354})
-     (anim/timing alpha-value {:toValue  0
-                               :duration 500})])))
+    [(anim/spring bottom-anim-value {:toValue         styles/panel-height
+                                     :useNativeDriver true})
+     (anim/timing alpha-value {:toValue         0
+                               :duration        500
+                               :useNativeDriver true})])))
 
 (defn show-panel-anim
   [bottom-anim-value alpha-value]
   (anim/start
    (anim/parallel
-    [(anim/spring bottom-anim-value {:toValue -20})
-     (anim/timing alpha-value {:toValue  0.6
-                               :duration 500})])))
+    [(anim/spring bottom-anim-value {:toValue 20
+                                     :useNativeDriver true})
+     (anim/timing alpha-value {:toValue         0.6
+                               :duration        500
+                               :useNativeDriver true})])))
 
 (defn permission-details [requested-permission]
   (get browser.permissions/supported-permissions requested-permission))
 
 (views/defview permissions-panel [[dapp? dapp] {:keys [dapp-name]}]
-  (views/letsubs [bottom-anim-value  (anim/create-value -354)
+  (views/letsubs [bottom-anim-value  (anim/create-value styles/panel-height)
                   alpha-value        (anim/create-value 0)
                   current-permission (reagent/atom nil)
                   update?            (reagent/atom nil)]

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

@@ -93,12 +93,15 @@
    :background-color colors/black
    :opacity          alpha-value})
 
+(def panel-height 354)
+
 (defn permissions-panel [bottom-anim-value]
-  {:height                  354
+  {:height                  panel-height
    :position                :absolute
-   :bottom                  bottom-anim-value
+   :transform               [{:translateY bottom-anim-value}]
    :right                   0
    :left                    0
+   :bottom                  0
    :align-items             :center
    :background-color        :white
    :border-top-left-radius  8