Animated FlatList in React Native (Reanimated)

Рет қаралды 27,077

Күн бұрын

What's up mobile devs?
Today we're going to build from scratch a super powerful and simple animation over the React Native FlatList component.
My React Native animations course: www.reanimate.dev
Source code: github.com/enzomanuelmangano/...
Inspirational tweet: / 1558450169057779718
Did you like the video? You can support the channel by buying me a coffee here: www.buymeacoffee.com/reactiive ☕️
Support me on Patreon: / reactiive 🙄
Written Article: www.reactiive.io/articles/ani...
If you like this tutorial, don't forget to subscribe to the channel :)
Chapters:
00:00 Introduction
00:43 Setup
04:39 Exploring onViewableItemsChanged
06:28 Preparing the Animation
10:15 Which item "isVisible"?
12:52 Scaling animation
13:34 Final thoughts

Пікірлер: 40

@fabriziadicristo5777 Жыл бұрын

So excited to watch a new video from your channel🧐 keep it up!

@MH-zt1do Жыл бұрын

Awesome stuff! Thank you so much for creating these videos and sharing knowledge 🙏

@ejikeezekwunem4162 Жыл бұрын

I can't thank you enough for these awesome tutorial series. Thank you so much

@felipemelendez5741 3 ай бұрын

Another awesome tutorial from you and another great gift for us, thank you!

@raymondmichael4987 Жыл бұрын

It’s good to see you back

@DigitalAndTradingSolutions 10 ай бұрын

another simple yet very useful video watched , created by a really master of animation

@user-pz6kr7px3i Жыл бұрын

Thank you! Your channel is great!

@VictorDequidt Жыл бұрын

Yeah new video !! Nice :D ! Keep it up !

@asadraza4522 Жыл бұрын

Great Work 👍

@topmusicrelaxation2227 Жыл бұрын

Great tutorial 👏🎉🥳

@dglalperen Жыл бұрын

So underrated !!! thanks for the quality content

@ahmetbasdan53 Жыл бұрын

thank you so much for the video👍

@doniaelfouly4142 Жыл бұрын

AMAZiNG ! thanks

@charlielee3945 Жыл бұрын

This channel is a gem

@yurkenowl Жыл бұрын

thanks a lot love your content

@benji9325 Жыл бұрын

Bro we need more contents!

@slemaniit8467 Жыл бұрын

I really liked your tutorial, and I know you most likely using Expo can you create a React Native project, and install and configure Reanimated without Expo? (If it is possible)

@bayramarif526 Жыл бұрын

very good... but iterating over the all array again in every single item might not be the best practive i think. becouse thats 50x50 iterations in your use case

@micoberss5579 Жыл бұрын

Which snippet package are you using?

@MuhammadHussain-codr Жыл бұрын

Make animation go to a specific point for reference deleting a list item will pop and go to dustbin with animatiom

@tuan1842 9 ай бұрын

*very good.... but i can't handle pagination with it, system gives error: "Invariant Violation: Changing onViewableItemsChanged on the fly is not supported", please help me*

@alirezahadjar9874 Жыл бұрын

Nice job. I think it is possible to use this method to simulate the mesaages app on ios. (Little movement of items when they become visible). Am I right?

@Reactiive Жыл бұрын

Hi Alireza, thanks for the feedback. In that case the animation depends on the item visibility, on the Messages app instead the animation appears continuously on the scroll. I think that some code can be definitely reused across both animations but there are few changes needed

@tuan1842 9 ай бұрын

*i have 1 textinput box in screen, when i type from keyboard, the system gives error: "Invariant Violation: Changing onViewableItemsChanged on the fly is not supported", please help me*

@XAH30 Жыл бұрын

What about android? During the animation on android there are strong twitches and the animation in general works strangely.

@patricio758 Жыл бұрын

I get this error at scrolling :( Invariant Violation: Changing onViewableItemsChanged on the fly is not supported

@rubenjamesdelacruz3230 10 ай бұрын

Im experiencing an issue wherein, when im calling a Useeffect with a dispatch within the screen. it causes, an error stating `Invariant Violation: Changing onViewableItemsChanged on the fly is not supported`. seems to me this will only work on static datas.

@tuan1842 9 ай бұрын

me too!

@arupde6320 Жыл бұрын

be regular

@hoangtranvietdev Жыл бұрын

Awesome! please let me know snippet you used. thanks!

@tuan1842 9 ай бұрын

*ồ hello ông anh, e thấy cái này nó chỉ hoạt động với dữ liệu tĩnh, khi data thay đổi hay state thay đổi nó đều bị lỗi, không biết ông anh có cách khác phục ko chỉ e với*

@cuonglehuu7762 8 ай бұрын

@@tuan1842 hello bro mình cũng đang áp dụng thử cách này nhưng cũng bị lỗi. không biết bro fix được chưa?