Advanced React Native Animated FlatList Picker - Synchronised FlatLists
In this tutorial I'm going to teach you how to synchronise two different FlatList and how to create a picker animation in React Native. This is a performant react native FlatList animation that will work on both iOS and Android at 60fps and there's no need for a Masked View to create this type of animation.
You can use this picker when doing a react native social auth screen.
👉Join Discord: / discord .
I'll walk you through:
How to synchronise two FlatLists
How to get the selected item from a FlatList using onMomentumScrollEnd event
How to create the Masked effect using two different FlatLists
Inspiration: https://dribbble.com/shots/3431451-HU...
GitHub: https://github.com/catalinmiron/react...
👉👉👉 More react native animations: https://www.animatereactnative.com/ 👈👈👈
----
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:05 Project boilerplate
02:35 How an Item looks like
03:32 Create the reusable FlatList component
05:30 React.forwardRef for FlatList component
07:00 First FlatList component
08:02 Second FlatList component (the masked view style)
10:02 Synchronise the two FlatLists
12:05 Sync the second FlatList based on scrollY value
14:00 Get the active slide index onMomentumScrollEnd
15:59 Final words and thank you so much
#reactnative #flatlist #picker #animation #sync-2-flatlist #react-native-social-auth #react-native-masked-view #react-native-picker-flatlist