Advanced React Native FlatList stack carousel animations at 60fps

Опубликовано: 12 Август 2020
на канале: 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

Смотрите видео Advanced React Native FlatList stack carousel animations at 60fps онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Catalin Miron 12 Август 2020, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 34,744 раз и оно понравилось 1.1 тысяч людям.

106