Advanced React Native FlatList stack carousel animations at 60fps

Published: 12 August 2020
on channel: Catalin Miron

34,744

1.1k

In this tutorial we are going to create a stack carousel animation in React Native using FlatList, Animated API and FlingGestureHandler from react-native-gesture-handler package.

I'm also going to show you a technique that I call interconnected animations or reactive animations, where 2 different animations react to each other.

I'm going to teach you how to
create a stack style carousel
how to create a reactive animated value
how to do infinite scrolling and fetch new data
how to create a flicker type animation when changing the active slide

Inspiration: https://dribbble.com/shots/3731362-Ev...
GitHub: https://github.com/catalinmiron/react...

👉👉👉 More react native animations: https://www.animatereactnative.com/ 👈👈👈

---
Expo: http://expo.io
React Native Gesture Handler: https://github.com/software-mansion/r...

----

👉Join Discord:   / discord  .

Want to support me?

Patreon:   / catalinmiron
BuyMeACoffee: https://www.buymeacoffee.com/catalinm...
Paypal: https://paypal.me/catalinmiron
----
You can find me on:

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

Timeline:
00:00 Intro
01:35 Project walkthrough
03:23 Create the FlatList
05:52 Fix zIndex from FlatList renderItem
06:20 Modify FlatList CellRendererComponent
08:23 Create the reactive Animated variables
09:30 Create reactive Animated.spring animation
10:41 Create the FlatList Stack items style
13:31 Clamp the number of Visible Items
14:20 How Reactive Animated.Value works
15:45 Use FlingGestureHandler
16:55 FlingGestureHandler swipe Left
19:11 FlingGestureHandler swipe Right
20:00 Animate Flicker based on scroll position
21:32 How to fetch new data / Infinite scrolling
22:35 Final words

#reactnative #animation #FlatList #carousel #gestures #FlingGesture

On this page of the site you can watch the video online Advanced React Native FlatList stack carousel animations at 60fps with a duration of hours minute second in good quality, which was uploaded by the user Catalin Miron 12 August 2020, share the link with friends and acquaintances, this video has already been watched 34,744 times on youtube and it was liked by 1.1 thousand viewers. Enjoy your viewing!

1,323