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-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
Watch video Advanced React Native FlatList stack carousel animations at 60fps online without registration, duration hours minute second in high quality. This video was added by user Catalin Miron 12 August 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 34,744 once and liked it 1.1 thousand people.