Animated FlatList in React Native (Reanimated)

Подписаться 13 тыс.

Просмотров 29 тыс.

50% 1

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

Опубликовано:

4 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 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 5 месяцев назад

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

@raymondmichael4987 Год назад

It’s good to see you back

@VictorDequidt Год назад

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

@user-pz6kr7px3i Год назад

Thank you! Your channel is great!

@DigitalAndTradingSolutions Год назад

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

@dglalperen Год назад

So underrated !!! thanks for the quality content

@asadraza4522 Год назад

Great Work 👍

@topmusicrelaxation2227 Год назад

Great tutorial 👏🎉🥳

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

@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 11 месяцев назад

*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*

@tuan1842 11 месяцев назад

*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*

@arupde6320 Год назад

be regular

@rubenjamesdelacruz3230 11 месяцев назад

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 11 месяцев назад

me too!

@patricio758 Год назад

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

@XAH30 Год назад

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

@MuhammadHussain-codr Год назад

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

@saviodev777 10 месяцев назад

in my project, even with React.memo, dont re render in ListItem :(

@hoangtranvietdev Год назад

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

@tuan1842 11 месяцев назад

*ồ 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*