status-im
/
status-react
mirror of https://github.com/status-im/status-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Example showing working/non-working animation

This commit is contained in:
Icaro Motta 2023-01-04 18:36:08 -03:00
parent 8d08de3d4b
commit 25bf309a8a
No known key found for this signature in database
GPG Key ID: 009557D9D014DF07
5 changed files with 62 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/mocks/js_dependencies.cljs
View File

@ -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 {}

1
src/react_native/core.cljs
View File

@ -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)

6
src/react_native/flat_list.cljs
View File

@ -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)])

31
src/react_native/reanimated.cljs
View File

@ -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
withTiming
withDelay
withSpring
withRepeat
Easing
Keyframe
cancelAnimation
SlideInUp
SlideOutUp
LinearTransition)]
(Easing
FadeInLeft
FadeOutRight
Keyframe
LinearTransition
SlideInUp
SlideOutUp
cancelAnimation
useAnimatedStyle
useSharedValue
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))

45
src/status_im2/contexts/activity_center/view.cljs
View File

@ -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
{:data notifications
: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}]]))])])
;; Set to true to see insertions/removals causing the layout to
;; animate correctly. When false, the FlatList is not animated at all
;; on layout changes.
;;
;; Issue:
;; https://github.com/software-mansion/react-native-reanimated/issues/2737
(if true
(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}])]))])])