Advanced React Native FlatList stack carousel animations at 60fps

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-Event-cards-iOS-interaction
GitHub: https://github.com/catalinmiron/react-native-advanced-stack-flatlist-carousel

??? More react native animations: https://www.animatereactnative.com/ ???

---
Expo: http://expo.io
React Native Gesture Handler: https://github.com/software-mansion/react-native-gesture-handler

----

?Join Discord: https://discord.gg/vg7hUDU.


Want to support me?

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

- Github: http://github.com/catalinmiron
- Twitter: http://twitter.com/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