Animate link previews enter/leave (#15984)

src/status_im2/contexts/chat/composer/link_preview/view.cljs

@@ -2,14 +2,28 @@
   (:require
     [quo2.core :as quo]
     [react-native.core :as rn]
+    [react-native.reanimated :as reanimated]
+    [status-im2.contexts.chat.composer.constants :as constants]
     [status-im2.contexts.chat.composer.link-preview.events]
     [status-im2.contexts.chat.composer.link-preview.style :as style]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]))
 
-(defn message-draft-link-previews
+(defn- use-animated-height
+  [previews?]
+  (let [height (reanimated/use-shared-value (if previews? constants/links-container-height 0))]
+    (rn/use-effect
+     (fn []
+       (reanimated/animate height (if previews? constants/links-container-height 0)))
+     [previews?])
+    height))
+
+(defn f-view
   []
-  (let [previews (rf/sub [:chats/link-previews-unfurled])]
+  (let [previews (rf/sub [:chats/link-previews-unfurled])
+        height   (use-animated-height (boolean (seq previews)))]
+    [reanimated/view
+     {:style (reanimated/apply-animations-to-style {:height height} {})}
      [quo/url-preview-list
       {:key-fn               :url
        :preview-width        (- (:width (rn/get-window))
@@ -25,4 +39,8 @@
                                      :loading?  loading?
                                      :thumbnail (:data-uri thumbnail)
                                      :url       url})
-                                 previews)}]))
+                                  previews)}]]))
+
+(defn view
+  []
+  [:f> f-view])

src/status_im2/contexts/chat/composer/view.cljs

@@ -110,7 +110,7 @@
            :max-length               constants/max-text-size
            :accessibility-label      :chat-message-input}]]
         [gradients/view props state animations show-bottom-gradient?]]
-       [link-preview/message-draft-link-previews]
+       [link-preview/view]
        [images/images-list]
        [actions/view props state animations window-height insets subs]]]]))