Advanced React Native FlatList animations at 60fps with Animated API

Catalin Miron
Catalin Miron
104,742
13
Published 2020-08-05
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.

- Inspiration: dribbble.com/shots/8257559-Movie-2-0
- GitHub: github.com/catalinmiron/react-native-movie-2.0-car…

👉👉👉 More react native animations: www.animatereactnative.com/ 👈👈👈
--
- Expo: expo.io/
- TMDB: www.themoviedb.org/

----

👉Join Discord: discord.gg/vg7hUDU.

Want to support me?

- Patreon: patreon.com/catalinmiron
- BuyMeACoffee: www.buymeacoffee.com/catalinmiron
- Paypal: paypal.me/catalinmiron
----

You can find me on:

- Github: github.com/catalinmiron
- Twitter: twitter.com/mironcatalin
- Website: batman.codes/

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
All Comments (21)