Advanced React Native FlatList animations at 60fps with Animated API

I decided to make another advanced FlatList #ReactNative animation video tutorial this time. This is an animated carousel/animated slider with lots of animations going on.

In this video tutorial we'll learn how to create:

- use the snapToInterval prop
- how to display a portion from the prev and next item
- how to align the active slide in the middle
- how to use MaskedView

Built using @expo, vanilla React Native Animated API and FlatList.
This code works in plain React Native project as well since we are using only React Native APIs such as Animated and FlatList.

--

----

Want to support me?

----

You can find me on:


Timeline:
00:00 Intro
01:15 Project presentation
04:09 snapToInterval / decelerationRate
05:07 animate FlatList items
07:30 how to display the item in the middle snapToInterval
09:45 fix FlatList item animation
10:33 Create the backdrop
12:45 Backdrop FlatList
14:15 LinearGradient to fade the Backdrop
16:20 Animate Svg to create the parallax effect
18:53 60fps demonstration
19:26 Final words

#reactnative #animations #expo #tmdb

[sripasum]

You deserve many more subscribers for this. Thank you for the quality content ☺️

[jolly]

Thank you for making awesome tuts for us and inspiring the React Native movement!

[prakashd]

This guy is very underrated . He deserves more subscribers .

[all-in-all]

Thanku so much bro I will be implementing this animation in my project, I will share your video in my friend circle I think you deserve more subscribers, 🙂👍

[andreistoica]

Great work! I enjoyed every piece of it.

[theOrdinaryDev]

This is the best react native content I have ever seen.

[thatsalot]

Ohhhh... I can't express how happy I am like I can do all that stuff in css or framer motion but I was struggling to do that in react native and thought that I lost all my progress but your channel gave me hope to continue working on react native.

[johnnyquid]

This was awesome, I loved it, super helpful.

[aleks]

Awesome video, clean code, no complications!

[akmalahmed]

Thank you very much. I'll share this video with my friends.

[tiganaGTV]

Thank you very much for your great content. I'm going to watch all your videos. I'm new to react-native.

[lucasmoura]

Hey man, that was a really nice video, and a great learning. Thanks, from Brasil

[semiherdogan]

very helpful tutorial! I learnt a lot about animations on rn through your videos 👍🏻 thank you...

[AkshatKumawat]

I'm pretty impressed with this tutorial and your way to teach is so good... Cam you please make a video on instgram stories animation that will be appreciated ❤️

[anhquannguyen]

Great tutorial again. Thank you so much

[koffworld]

This interface is out of this world! 🥰🥰

[sibrimbarcenasreales]

Nice video, thanks for this content !

[collocheru]

Your explanations are really nice, thanks for a great tutorial

[codehack]

Awesome video, please continue making video like this.

[youssefmuhamad]

Awesome! Bring more animation videos, you explain very well. +1 sub