Advanced React Native FlatList animations with Animated API
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- I decided to make an Advanced React Native FlatList animation video tutorial this time. This is an animated carousel / animated slider with lots of awesome animations going on.
In this video tutorial we'll learn how to create:
- learn how to create a text parallax effect
- learn how to animate a pagination indicator
- learn how to create a clipper/ticker animation with translateY
- learn how to animate a circle based on active slide index
Built using @expo, vanilla React Native Animated API and FlatList.
This code works in plain React Native project as well since we are using only React Native APIs such as Animated and FlatList.
Inspiration: dribbble.com/shots/3894781-Ur...
GitHub: github.com/catalinmiron/react...
----
👉Join Discord: / discord .
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:40 project description
- 04:16 create Animated.event on FlatList
- 5:54 Animate Image
- 7:35 Parallax effect
- 12:01 Animated Ticker/Clipper component
- 19:00 Animated Circle component
- 28:11 Animated Pagination component
- 35:51 Final words
#reactnative #animations #parallax #flatlist #expo
![เจ้าผู้เดียว - ดิด คิตตี้ [OFFICIAL MV]](http://i.ytimg.com/vi/q0NLCYKBOTo/mqdefault.jpg)
![[ไฮไลต์] แบดมินตันชาย วิว กุลวุฒิ(ไทย) vs Kenta Nishimoto(ญี่ปุ่น) รอบ 16 คน | โอลิมปิก 2024](http://i.ytimg.com/vi/kaQRLljJkSI/mqdefault.jpg)
Catalin, you really need to create a course about react native animations !! I'll be the first to buy it!
Amazing tutorial!!
I'll be the second
Good idea!
Good idea and maybe one day I'll be able to make it happen! Thank you Pedro, it means a lot to me!
@@CatalinMironDev Get on this! Would be a great idea
Pagaría por ello! 💪🏼💪🏼
You are the guy that reveal the magic of RN animation! Thank you very much, now I know how these wonderful animations work.
I didn't know that all those dribbble stuffs were actually implementable. I'm still amazed by you teaching style
Dude, you're incredible. Thanks for sharing your immense knowledge.
Thanks for this great video ! I haven't yet really got to play with animations, but you explain it very well. Already got an idea, can't wait to try it out !
Amazing Vicent! Please share it with us after you have it ready. Let me know if you need any help! Cheers!
DUDE!!! Thank you so much! I've stuck with this problem for a long time when need scale element depending on scroll position. But you help so much!
Your tutorials are awesome man! Keep up the good work :)
Thank you 🙏
Always admired your shared work on twitter. seeing you here gives me joy! SUBSCRIBED!
Awesome! Thank you Joshua ✌️
We are in support with you, Your content is really awesome and appreciated.......
I appreciate that! Many many thanks!
Good content! Amazing instructor! 👏👏👏
Thanks Catalin! Some animation hints were helpful for my app's animation!!
Amazing 😍 Thanks a lot✌️
This is really simple and awesome bro. Learned new things today. I love this video ❤️.
Thank you Ravi! I am glad that found it easy to follow and learned something new!
You are one of my favorite and awesome tutor on TH-cam
Respect Mirza ✌️
Wonderful tutorial.. Please keep posting
Tutorials are above being amazing. Theyare amazing++.
Thanks a lot Oguzhan! ✌️
Best channel I’ve found in a long time
Thanks a lot ✌️
i like how you make it so simple, great tutorial
Thank you Mohamed!
This video was so helpful for me some time ago. Recently I created a video applying the same concept but using Reanimated 2
Extremely good content! Keep it up!
Very cool tutorial! Thanks for sharing it!!!
Thank you Pierre, I’m glad that you enjoyed it!
Amazing, u make things look so simple.
Thanks Naoufal! I’m glad you enjoyed it!
✌️
Mindblowing as usual 😍😍
🤯Thank you 🙏
This is reallllllllllly damn good!!! Please make a complete tutorial!!!!
Amazing content, Thank You
Learning awesome things from you everyday. Thanks for creating awesome content like this!!😄
I’m glad to hear this! Thanks Dixit ✌️
@@CatalinMironDev Would really love to buy your course on react animation if you create one without second thought. You can publish your course on Udemy or any other platforms and would definitely love to pay n learn for the quality of content you provide.
thanks, dude for creating this video, I am new to React Native and was looking for a way to develop a carousel for a project I am working on.
Glad I could help! Don't forget to share it with us after you're done working on it. Thanks Furqan!
Great video, Thanks
Amazing content! You're a great tutor.
Thank you Mateo 🙏
Hey thank you!! this video is amazing!!
Thank you Cayetano, I am glad that you liked it! ✌️
Great Video , Really Helpful
I’m glad you liked it Nishad! ✌️
I come here for learning animation, thank you very much
I’m glad you learned something. Thanks Duy ✌️
Thanks for you lessons, and work!
Glad you like them! Thanks Victor ✌️
@@CatalinMironDev ^-^
amazing!
Fantastic
great video
Great job 👍
Thank you Fanzana ✌️
awesome!!!
Great!
Beautifull
I am not going to miss any of your videos -
Is this good or bad? Because I want you to watch my videos. Please let me know what can I improve. Thanks Khalid ✌️
@@CatalinMironDev This is just too awesome stuff - I am learning every day from your tutorials.
Thanks. I was struggling with reanimated api because it was flickering at first frame with FlatList onScroll animation. Changed it to animated Api works great. Just have to change height animation to transform animaton bc of useNativeDriver
Glad it helped! Thanks Necmettin ✌️
Спасибо!
Thanks so much ^^
You’re welcome!
LMAO Just uploaded right now. I've been trying to find tutorials like this earlier. Thanks man!
Glad I could help! Thank John!
Legend!
Thank you! ✌️
AWESOME. im waiting for show hide header like Whatsapp with header and top tab
You my brother are a LEGEND! Also highly underrated
Maaaan you're amazing, create a course about animations in React Native !!!
Thanks for the idea and I'm working on it. Thanks Pedro!
Great catalin
Thanks a lot Nikhil, I'm glad you liked it! ✌️
@@CatalinMironDev iam also a full stack developer very informative videos you are publishing.
Nikhil Nainta I am glad that this is helping you, no matter what level you are. Thanks a lot for taking your time to check my videos ✌️
thanks bro
Any time John!
My idol
greate animating view big brain guy
Amazing tutorial! thankyou so much. I hope you make a Udemy course with bunch of animated case study :D
I'm working on creating a course about animations. I'll let you know once this is finished. Thanks a lot Rizaldi ✌️
Just gotta figure an app to use it. Awesome work mate!
Thanks Daniel! In case you figure it out where to use it, please share the app with me, I’d love to see it in action.
✌️
I Love the 🌵 in the background
Thanks Yasir! Shiny 🌵
Whenever I use the native driver, scrollX is never updated (remains at 0). When I set the native driver to false, the scrollX value becomes a very odd decimal number that changes every time I change slides (meaning a different number when I visit the same slide, for example the first slide starts at 0 but will then be 194.2422222 when I go back to it.).
Does anyone know how I can overcome this issue?
You are a monster lol thanks for the video. Can you make a video how to create an app from scratch with Hooks etc .. ??
Thanks Yanis! I will think about some app that I can build from scratch but right now I am trying to create as much videos as possible with real life animations that can easily be applied to any project. It’s a great suggestion by the way.
Thumbs up man
Thank you so much Ade!
cant we do the same thing in react native cli, i mean not in expo?
you should make a course about RN animation
👏🏼👏🏼
Thanks Oscar, I’m glad that it helped you!
Hello Catlin ,
I have a Query please tell me
Why have you taken this value
const inputRange = [(index - 1) * width, index * width, (index + 1) * width];
in Item and
this value
const inputRange = [-width, 0, width];
in other places
I'm really confused
please help me out !!
Hey, I'm new here in this channel. I'll subscribe to see whats next!!!!
Thank you Melissa! 🙏
Thank you . Its amazing to learn these stuffs so simple .
I tried to implement the instagram multi picture pagination indicator but i don’t know how to set the inputs range and output range . Can you provide an example for me ?
I can do it, could you please share any animation or a link to the animation itself? I'm not using Instagram unfortunately so I don't know about what animations we're talking about :)
Thanks a lot!
@@CatalinMironDev i just find this example patricktran.github.io/react-magic-slider-dots/
Mohsen Soleimani I can do it:) I’ll add it to my list for future video tutorials. Thanks for sharing it with me!
@@CatalinMironDev How can I ever thank you enough. people like you are not easy to find.
Thanks for this great tutorial. How can we change indicator color based on the color property from the data array? As I know borderColor isn't supported by Animated API, any ideas?
Unfortunately as you mentioned this is not supported by nativeDriver, so you need to make it false ‘useNativeDriver: false’ and based on scrollX position you can interpolate colors. Thanks Leri, Cheers ✌️
Will the animation be smooth without nativeDriver?
Just test it out. There are some benefits on using the nativeDriver but you can create another animated value that will not use nativeDriver and use it for color interpolation.
⭐⭐⭐⭐⭐ Rate
Thank you Danny ✌️
Thanks for video . I have a question . Why are you using like this const scrollX = React.useRef(new Animated.Value(0)).current instead of const scrollX = new Animated.Value(0); ?
The reason is that useRef returns a mutable ref object whose .current property is initialized to the passed argument (initialValue).
The returned object will persist for the full lifetime of the component. (reactjs.org/docs/hooks-reference.html)
Thanks ✌️
@@CatalinMironDev Thanks
you are doing great work my brother. but there is one issue , can you explain more or tell more how we handle the pagination bottom circle . because when i increase the number of items the circles also increase and it did not fit on the right bottoms it expands.
In this tutorial I am just showing how to create the animations, nothing more. If you'd like I can tackle this into a separate video, where we a dynamic pagination that support a variable range. Thanks for the feedback Chores ✌️
@@CatalinMironDev brother you are doing great work. weldone but i suggest please make pagination dynamic
online.fliphtml5.com/vfrai/ysms/#p=1
Like this way?
Great video man, but I would recommend if you add a low background lo-fi music as the throat snapping when you are talking is sometimes annoying.
Thanks for the tip! Do you know at what volume should have the background music to avoid any issues?
@@CatalinMironDev Well anything lo-fi so it won't distract the viewers and at the same time it will make the long videos more entertaining.
Cpt Package that’s a great suggestion. I’ll try to apply it on my next video. Please share your feedback afterwards. Thanks a lot ✌️
Hi Catalin i was wondering , can React Native hide bottom navigation when scroll? I think header not to be hard , but i dont know how to implement hide bottom navigation when scrolling, hope you get the answer
I think it is possible, I have to try it tho but the immediate answer is yes:) thanks Kenzo
Thank you so much, hope you want to create a spcial video about it later . 👍
good video!
kind of confusing that you didn't include us in the setup though.. you could've had a better tutorial if you started from scratch
kindly make some videos in react native without expo and use cli
This should work the same in plain React Native projects without Expo because I’m using only APIs exposed by react-native package. Did you had issues porting this to a plain react-native project? Thanks in advance Suleman!
How to use it with tab navigator?..Btw Great work bro :)
Thanks Ameya. I don’t know to be honest. What issues you encounter?
Hello sir. please create a video of animated drawer.
I already created a tutorial for a drawer, also integrated in react-navigation v5. Please check my channel. Thanks ✌️
It’s vip bro :))
Thanks a lot Thuan ✌️
Totally messed up in android:(
Hi Matin, I don't know exactly what's your issue but here's a preview of it on my Android device (Nexus 5x) streamable.com/yrdb3w.
@@CatalinMironDev when I add scale to tranform image the image will go upside down! I don't know why! I thought the problem would be RTL and LTR but it wasn't.
first
I'm fallin in love with you
Thank you ✌️