In this tutorial we are going to create a stack carousel animation in React Native using FlatList, Animated API and FlingGestureHandler from reactnativegesturehandler 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/3731362Ev...
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/softwaremansion/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