Advanced React Native Animated FlatList Picker - Synchronised FlatLists
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- 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: dribbble.com/shots/3431451-HU...
GitHub: github.com/catalinmiron/react...
👉👉👉 More react native animations: www.animatereactnative.com/ 👈👈👈
----
Want to support me?
- Patreon: / catalinmiron
- BuyMeACoffee: www.buymeacoffee.com/catalinm...
- Paypal: paypal.me/catalinmiron
----
You can find me on:
- Github: github.com/catalinmiron
- Twitter: / mironcatalin
- Website: 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
![[#SHORTS CLIP] ครูอึ้ง กรรมการอึ้ง ฮ่าๆ l ซานิเบาได้เบา l One Playground](http://i.ytimg.com/vi/qeBTuMJs4t0/mqdefault.jpg)
Thank you for taking the time to make these tutorials. I have learned a lot from your videos.
My pleasure and I'm glad you find them useful. Thanks Tandav ✌️
I'm glad to have found your channel. Ever since I saw your birthday candle ruler video, I'm learning and focusing more on RN Animation and the power of it. I wish I had found it earlier but it's never too late. Cheers
Wonderful! Thank you so much! I'm glad that I can help you in any ways possible. Looking forward to seeing what you're building. Thanks R! ✌️
@@CatalinMironDev Could you do a video on animated splash screen in react native using GIF?
I can give it a try 👍
best react native channel for creative animation
You made it so simple man. Great video 🎉
I'm glad you find this video useful and easy to follow. Thanks Ashwin!✌️
Thanks for the tutorial. Awesome content as usual!
Thanks Pierre, I’m glad you liked this video as well ✌️🤗
You are AMAZING Catalin. You inspired me. Thank you so much. Keep it up.
I’m blessed 😇. Thanks a lot Ken! ✌️
Another impressive animation. Amazing!
Thanks a ton! I'm glad you liked it. Thanks ✌️
Great! 👌🏻
Searched a lot about this
Thank Mohamad I'm glad you found what you need. Thanks ✌️🤗
Awesome tutorial! You're helping me a lot.
Glad to help! Thanks Youssef! ✌️
Thank you so very much for this informative video.
It was amazing amazing and beautiful .....Love to see more videos.
Very nice and easy to understand ☺️ tutorial keep it up 👍🏻
I'm glad this was easy to follow. Thanks Mehank ✌️
Amazing content as always 😃 Thank you very much.
Thanks! ✌️
E ok asa :)) chiar e misto, big up
You are awesome. Thank you for this tutorial.
Glad it was helpful! Thanks Suraj! ✌️
As usual a new amazing video
Thank Muhammad, I'm glad that you liked it! ✌️
Thank you so much.I learn a lot .
Glad to hear that. Peace Aazam ✌️
Yes please, Thank you for changing to dark theme man
I'm glad you liked it. Thanks Proff! ✌️
Awesome Buddy
Great tutorials!
Thank you Sandesh! There's more to come ✌️
Nice animated flatlist, plz provide more tutorials for Animation
I'm doing my best to provide as many animation tutorials as possible. Thanks! ✌️
you help me solve my problem. Thanks!
do thuan this is amazing, that’s the main reason I’m creating this tutorials. Thanks a lot and I’m glad I can help you!
that's so cool
Can you share your VS Code settings. It looks super awesome man
You gem man 🙌🏼
Thanks 🙏
amazing!
Thanks Adrian ✌️
You are amazing
You're amazing too Jefferson! Thanks ✌️
Perfect
Thanks Furkan! ✌️
That was a great video man and thank you for changing to a dark theme😂. By the way which font family are you using in VS Code?
The font is called Operator Mono and the theme is Palenight marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme. Thanks Shriganesh ✌️
@@CatalinMironDev Thank you🙂
Hi Catalin, I'm facing a weird issue while implementing this. The moment I remove showtext from the first list, the lists stops overlapping. Not able to figure out why.
Muito top
Hello Guy. I hope you're doing well. can't find the css at the beginning of the video
Hey Catalin how are you dear? I have a request to you, can you please make a tutorial on instgram stories animation in your style, actually your teaching style is impressive.
You don’t have to use forwardRef. You can pass the ref directly to the FlatList. You only have to use forwardRef when you extract the FlatList to a separate component.
This is what I did, I extracted the FlatList into a component (the only difference is that it was in the same files). Thanks 🙏
So why did you use React.memos?
How do you set up the font for VS Code? Which font are you using?
Hi,
Font: Operator Mono
Theme: Palenight - marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme
Thanks ✌️
hi sir , can you make a video on react native TV (android TV) : (IOS TV) ? because of focusing the each element in flatList separately . Please ....
Hi Rohith, I haven't played around with TV OS so far so I don't have a clear answer to give. Thanks!
Love your theme, Please what's the name and your font looks awesome too!
Hi,
Font: Operator Mono
Theme: Palenight - marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme
Thanks ✌️
can we change style from onPress or onFocus fuctions?
You can try to setState isFocused for onFocus and apply a different style to the view based on the isFocused flag. Thanks Rohith!
You put reactnative with typescript projects bro please
Hey,
Please make video on basics of reAnimated
I'm working on a course about Reanimated2. I'll keep you posted once this is available. Thanks Muhammed! ✌️
@@CatalinMironDev Thanks.
Awaited for that please explain in deep there are more stuffs in reAnimated
The dark theme is easier to read. Please stick with the dark theme. Also, this is a great video. I really like the effect, thanks for sharing.
Thanks Russel, I’m going to stick with it for now. I’m glad you liked it. Peace ✌️
You are a good teacher. You make difficult things easier. Thank you
BTW white background in VS Code was better.
You are welcome and thanks for commenting about the VSCode theme. I'm also a big fan of light themes. Thanks Rohit! ✌️
Great content... I don't know if it has been asked before? Are you planning to create a udemy course? It would be awesome.
Working on it! I'm building a course hosted on my own platform/website. Thanks a lot for showing your interest Fateh!
@@CatalinMironDev Great🔥
Any update on any courses ?
Question: Doesn’t this approach depend on the scroll event throttle? Doesn’t the onScroll method get called asyncronously?
If you used an Animated FlatList and animated its transformY with the Y offset of the scrollable one, you could get the same effect and keep it all native.
Also I think you could also do this by having only one FlatList in the background and overlaying it with some Views to hide the non-selected icons. But, I understand the point was to demonstrate syncing 2 FlatLists so it's all cool.
Ps. Great work! I love your videos and crazy animation ideas. Cant wait for the next one!
Thanks Mateo. onScroll event (I might be wrong) but it is async but coming at 1000/16ms (60fps). I’m not sure about the usage with a single FlatList but you can give it a try and share the code. Thanks for showing your support and feedback, it means a lot to me. Thanks Mateo ✌️
@@CatalinMironDev Here's the implementation with a single FlatList and some Views. Sorry for the messy code... I hope it's not too convoluted. snack.expo.io/TZWpQ0b_I
Why do you use:
1. scrollY = createRef for animated value (??? what), instead of just scrollY = Animated.value() ????
2. why do you use 'useCallback' with just onPress FOR simple button?
In the latest videos I’m saying why I’m using useRef. Basically this is because whenever the component is re-renders or receives new props the value of scrollY is not going to change. Thanks ✌️
@@CatalinMironDev i thought in new react it's not necessary because of optimizations... also FC isn't 'render()' function like in class. So, I ask question because of that. Hmm.... Maybe I should do some tests and read documentation again. Thanks
@@CatalinMironDev useCallback for onPress the same. I thought there is no new instance creation but just 'you are already declared, okay do nothing' in optimization.
hmm anyway thanks. awesome videos.
That's awesome, can you tell me how I can make money with react native?
Nowadays there are multiple companies that are looking for React Native developers so you can apply for one of their positions. To be honest I don't have a magic formula but if you are able to build couple of applications and grow your portfolio you can start making money as well by being hired by a company. Thanks!
@@CatalinMironDev this is good advise
How do you even learn all this stuff? React-native's docs are full of shit.
Haha thanks Goe! I’m one of the early React Native adopters and had access to it in the private mode and I was building apps and animations since then. Only hard work and passion I think that got me where I am now. If you need any help or you want me to tackle any subject, feel free to share it with me. Thanks a lot ✌️
@@CatalinMironDev You are too nice :)