Example showing working/non-working animation

src/mocks/js_dependencies.cljs

@@ -240,6 +240,7 @@ globalThis.__STATUS_MOBILE_JS_IDENTITY_PROXY__ = new Proxy({}, {get() { return (
                         :timing                  nil
                         :onChange                nil
                         :View                    #js {}
+                        :FlatList                #js {}
                         :Image                   #js {}
                         :ScrollView              #js {}
                         :Text                    #js {}

src/react_native/core.cljs

@@ -24,6 +24,7 @@
   (reagent/adapt-react-class (.-TouchableWithoutFeedback ^js react-native)))
 
 (def flat-list flat-list/flat-list)
+(def flat-list-animated flat-list/flat-list-animated)
 
 (def section-list section-list/section-list)
 

src/react_native/flat_list.cljs

@@ -1,8 +1,10 @@
 (ns react-native.flat-list
   (:require ["react-native" :as react-native]
+            ["react-native-reanimated" :default reanimated]
             [reagent.core :as reagent]))
 
 (def react-native-flat-list (reagent/adapt-react-class (.-FlatList ^js react-native)))
+(def react-native-flat-list-animated (reagent/adapt-react-class (.-FlatList ^js reanimated)))
 
 (defn- wrap-render-fn
   [f render-data]
@@ -39,3 +41,7 @@
 (defn flat-list
   [props]
   [react-native-flat-list (base-list-props props)])
+
+(defn flat-list-animated
+  [props]
+  [react-native-flat-list-animated (base-list-props props)])

src/react_native/reanimated.cljs

@@ -1,24 +1,29 @@
 (ns react-native.reanimated
-  (:require ["react-native" :as rn]
+  (:require ["react-native" :as react-native]
             ["react-native-linear-gradient" :default LinearGradient]
             ["react-native-reanimated" :default reanimated :refer
-             (useSharedValue useAnimatedStyle
+             (Easing
-                             withTiming
+              FadeInLeft
-                             withDelay
+              FadeOutRight
-                             withSpring
+              Keyframe
-                             withRepeat
+              LinearTransition
-                             Easing
+              SlideInUp
-                             Keyframe
+              SlideOutUp
-                             cancelAnimation
+              cancelAnimation
-                             SlideInUp
+              useAnimatedStyle
-                             SlideOutUp
+              useSharedValue
-                             LinearTransition)]
+              withDelay
+              withRepeat
+              withSpring
+              withTiming)]
             [clojure.string :as string]
             [reagent.core :as reagent]))
 
 ;; Animations
 (def slide-in-up-animation SlideInUp)
 (def slide-out-up-animation SlideOutUp)
+(def fade-in-left-animation FadeInLeft)
+(def fade-out-right-animation FadeOutRight)
 (def linear-transition LinearTransition)
 
 ;; Animated Components
@@ -26,7 +31,7 @@
 
 (def view (reagent/adapt-react-class (.-View reanimated)))
 (def image (reagent/adapt-react-class (.-Image reanimated)))
-(def touchable-opacity (create-animated-component (.-TouchableOpacity ^js rn)))
+(def touchable-opacity (create-animated-component (.-TouchableOpacity ^js react-native)))
 
 (def linear-gradient (create-animated-component LinearGradient))
 

src/status_im2/contexts/activity_center/view.cljs

@@ -3,6 +3,7 @@
             [quo.react :as react]
             [quo2.core :as quo]
             [react-native.core :as rn]
+            [react-native.reanimated :as reanimated]
             [react-native.safe-area :as safe-area]
             [status-im2.contexts.activity-center.notification-types :as types]
             [status-im2.contexts.activity-center.notification.contact-request.view :as contact-request]
@@ -96,7 +97,13 @@
 
 (defn render-notification
   [notification index]
-  [rn/view {:style (style/notification-container index)}
+  [reanimated/view
+   {:style    (style/notification-container index)
+    ;; The `:layout` property is only necessary when not rendering notifications
+    ;; in a FlatList.
+    :layout   reanimated/linear-transition
+    :entering (-> ^js reanimated/fade-in-left-animation (.duration 250) (.delay (* index 100)))
+    :exiting  (-> ^js reanimated/fade-out-right-animation (.duration 150))}
    (case (:type notification)
      types/contact-verification
      [contact-verification/view notification {}]
@@ -120,11 +127,31 @@
               window-width  (rf/sub [:dimensions/window-width])]
           [rn/view {:style (style/screen-container window-width top bottom)}
            [header]
-           [rn/flat-list
+           ;; Set to true to see insertions/removals causing the layout to
-            {:data                      notifications
+           ;; animate correctly. When false, the FlatList is not animated at all
-             :content-container-style   {:flex-grow 1}
+           ;; on layout changes.
-             :empty-component           [empty-tab]
+           ;;
-             :key-fn                    :id
+           ;; Issue:
-             :on-scroll-to-index-failed identity
+           ;; https://github.com/software-mansion/react-native-reanimated/issues/2737
-             :on-end-reached            #(rf/dispatch [:activity-center.notifications/fetch-next-page])
+           (if true
-             :render-fn                 render-notification}]]))])])
+             (if (seq notifications)
+               (map-indexed (fn [index notification]
+                              ^{:key (:id notification)}
+                              [render-notification notification index])
+                            notifications)
+               [empty-tab])
+             [rn/flat-list-animated
+              {:data                      notifications
+               ;; This property seems to be necessary to tell Reanimated which
+               ;; transition to use to animate layout changes. Unfortunately it
+               ;; doesn't work.
+               ;;
+               ;; Comment:
+               ;; https://github.com/software-mansion/react-native-reanimated/issues/2737#issuecomment-1077956272
+               :item-layout-animation     reanimated/linear-transition
+               :content-container-style   {:flex-grow 1}
+               :empty-component           [empty-tab]
+               :key-fn                    :id
+               :on-scroll-to-index-failed identity
+               :on-end-reached            #(rf/dispatch [:activity-center.notifications/fetch-next-page])
+               :render-fn                 render-notification}])]))])])