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: https://discord.gg/vg7hUDU.


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-HUNGRY
GitHub: https://github.com/catalinmiron/react-native-animated-flatlist-picker

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

----
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: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