feat: album selector animation (#16533)

* feat: album selector animation

src/status_im2/common/bottom_sheet_screen/style.cljs

@@ -30,7 +30,7 @@
    :right           0
    :top             0
    :height          20
-   :z-index         1
+   :z-index         2
    :position        :absolute
    :justify-content :center
    :align-items     :center})

src/status_im2/contexts/chat/photo_selector/album_selector/style.cljs

@@ -1,5 +1,17 @@
 (ns status-im2.contexts.chat.photo-selector.album-selector.style
-  (:require [quo2.foundations.colors :as colors]))
+  (:require [quo2.foundations.colors :as colors]
+            [react-native.reanimated :as reanimated]))
+
+(defn selector-container
+  [top]
+  (reanimated/apply-animations-to-style {:top top}
+                                        {:position         :absolute
+                                         :z-index          1
+                                         :background-color (colors/theme-colors
+                                                            colors/white
+                                                            colors/neutral-100)
+                                         :left             0
+                                         :right            0}))
 
 (defn album-container
   [selected?]

src/status_im2/contexts/chat/photo_selector/album_selector/view.cljs

@@ -3,19 +3,21 @@
     [quo2.core :as quo]
     [react-native.core :as rn]
     [react-native.gesture :as gesture]
+    [react-native.reanimated :as reanimated]
     [utils.i18n :as i18n]
     [utils.re-frame :as rf]
     [quo2.foundations.colors :as colors]
     [status-im2.contexts.chat.photo-selector.album-selector.style :as style]))
 
 (defn render-album
-  [{title :title size :count uri :uri} index _ {:keys [album? selected-album]}]
+  [{title :title size :count uri :uri} index _ {:keys [album? selected-album top]}]
   (let [selected? (= selected-album title)]
     [rn/touchable-opacity
      {:on-press            (fn []
                              (rf/dispatch [:chat.ui/camera-roll-select-album title])
                              (rf/dispatch [:photo-selector/get-photos-for-selected-album])
-                             (reset! album? false))
+                             (reanimated/animate top (:height (rn/get-window)))
+                             (js/setTimeout #(reset! album? false) 300))
       :style               (style/album-container selected?)
       :accessibility-label (str "album-" index)}
      [rn/image
@@ -52,15 +54,17 @@
   [item index]
   (str (:title item) index))
 
-(defn album-selector
+(defn- f-album-selector
-  [{:keys [scroll-enabled on-scroll]} album? selected-album]
+  [{:keys [scroll-enabled on-scroll]} album? selected-album top]
   (let [albums          (rf/sub [:camera-roll/albums])
         albums-sections [{:title no-title :data (:smart-albums albums)}
-                         {:title (i18n/label :t/my-albums) :data (:my-albums albums)}]]
+                         {:title (i18n/label :t/my-albums) :data (:my-albums albums)}]
+        window-height   (:height (rn/get-window))]
+    [reanimated/view {:style (style/selector-container top)}
      [gesture/section-list
       {:data                           albums-sections
        :sections                       albums-sections
-      :render-data                    {:album? album? :selected-album selected-album}
+       :render-data                    {:album? album? :selected-album selected-album :top top}
        :render-fn                      render-album
        :sticky-section-headers-enabled false
        :render-section-header-fn       section-header
@@ -68,4 +72,9 @@
                                         :padding-bottom 40}
        :key-fn                         key-fn
        :scroll-enabled                 @scroll-enabled
-      :on-scroll                      on-scroll}]))
+       :on-scroll                      on-scroll
+       :style                          {:height window-height}}]]))
+
+(defn album-selector
+  [sheet album? selected-album top]
+  [:f> f-album-selector sheet album? selected-album top])

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

@@ -1,6 +1,7 @@
 (ns status-im2.contexts.chat.photo-selector.view
   (:require
     [react-native.gesture :as gesture]
+    [react-native.reanimated :as reanimated]
     [react-native.safe-area :as safe-area]
     [react-native.platform :as platform]
     [utils.i18n :as i18n]
@@ -96,16 +97,19 @@
         sending-image   (into [] (vals (rf/sub [:chats/sending-image])))
         selected-images (reagent/atom sending-image)
         window-width    (:width (rn/get-window))]
+    [:f>
      (fn []
        (let [camera-roll-photos (rf/sub [:camera-roll/photos])
              end-cursor         (rf/sub [:camera-roll/end-cursor])
              loading?           (rf/sub [:camera-roll/loading-more])
              has-next-page?     (rf/sub [:camera-roll/has-next-page])
              selected-album     (or (rf/sub [:camera-roll/selected-album]) (i18n/label :t/recent))
-            blur-active?       (> @current-scroll min-scroll-to-blur)]
+             blur-active?       (> @current-scroll min-scroll-to-blur)
+             window-height      (:height (rn/get-window))
+             top                (reanimated/use-shared-value window-height)]
          [rn/view {:style {:flex 1 :margin-top -20}}
-         (if @album?
+          (when @album?
-           [album-selector/album-selector sheet album? selected-album]
+            [album-selector/album-selector sheet album? selected-album top])
           [:<>
            [gesture/flat-list
             {:key-fn                  identity
@@ -123,16 +127,21 @@
                                           (rf/dispatch [:photo-selector/camera-roll-loading-more true])
                                           (rf/dispatch [:photo-selector/get-photos-for-selected-album
                                                         end-cursor])))}]
-            [confirm-button @selected-images sending-image close]])
+           [confirm-button @selected-images sending-image close]]
           [rn/view {:style style/buttons-container}
            [quo/dropdown
             {:type                      :blurred
              :size                      32
              :on-change                 (fn []
-                                         (swap! album? not)
+                                          (if-not @album?
-                                         (reset! current-scroll 0))
+                                            (do
+                                              (reset! album? true)
+                                              (reanimated/animate top 0))
+                                            (do
+                                              (reanimated/animate top window-height)
+                                              (js/setTimeout #(reset! album? false) 300))))
              :selected                  @album?
              :blur-active?              (and (not @album?) blur-active?)
              :override-background-color (when-not @album? :transparent)}
             selected-album]
-          [clear-button @album? selected-images blur-active?]]]))))
+           [clear-button @album? selected-images blur-active?]]]))]))