Advanced React Native Parallax Carousel with FlatList and Animated API
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- 🔥 In this video tutorial you'll learn how to create an Advanced React Native Parallax Carousel using FlatList and Animated API from React Native.
We'll go through:
- How to create and animated a FlatList Parallax Carousel
- How to make image inside the FlatList "move" using translateX
- How to style the FlatList and apply parallax effect
----
⚠️ Access full source code: www.animatereactnative.com/po...
----
Starter code: gist.github.com/catalinmiron/...
👉👉 Have any questions? 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:
TBD
#advanced-flatlist-animation #react-native-carousel #react-native-parallax-carousel #react-native-parallax #react-native-animated-carousel #react-native-flatlist #parallax-carousel
Really liked this walkthrough, it was relatively short and super useful. Thanks!
Thank you Alon, I’m glad I could properly explain it to you ✌️
I totally amazed, such high quality content for free
I’m glad you like it. Thanks Diwakar ✌️
I am still beginner but iam really happy when i watch your videos
Much love
Thanks God, i found your channel! This is the second tutorial that I went through on your channel, it's clear that you did it with love. Thank you Catalin for sharing your knowledge, the opportunity just come in the evening after a hard day and learn from profi is an amazing opportunity!
Nice effect man! Thanks for always give us new ideas! The new angle and lens look good
Glad you like them! Thanks Luis! ✌️
Omg this is the coolest thing I've seen for a very long time
Absolutely no words to describe your videos 🔥🔥
Thanks for the awesome content Catalin ❤
Glad you enjoy it! Thanks for leaving your feedback and showing your support Hadi ✌️
Really awesome !!!!!!!! It couldn't be better than this. Very love it.
i really like the change in the tutorial's intro nice great job as always !
Glad you like it! Thanks Youssef! ✌️
@@CatalinMironDev i like it as all of your tutorials , correct me if i am wrong but i do feel so positive energy from this tutorial you seem pretty happy and i am happy for you as well :)
an absolute treasure, this channel!
Thanks Usama, I’m glad you like the videos✌️
Amazing just built it and it's spot on 👌
I had to add *elevation: 12* to make the shadow appear for Android devices
Awesome as always. Really simple to understand.
I'm glad you liked it Sangeeth! ✌️
Thanks, man for giving us such good quality animation video on react native, I really love this.
Glad you liked it! Thanks! ✌️
Great tutorial, thanks
Awesome tutorial... i reccomend this one.
You are very awesome... Your Tutorial is very helpful and funny... take a love bro 💕💕💕
Your content is amazing
Thank you for the video!
You're always simple and awesome ❤️
Wow, thanks Ravi ✌️
Wow, been working in React for a year now and now have to learn React Native for my job and I just realised your channel has a lot of freakishly good content on React Native. thanks will learn a lot!
Wow, I’m honored to hear this. Thanks a lot ✌️
@@CatalinMironDev 100% keep up the good work. I will recommend the channel to anyone I hear trying to learn react native.
So clean !
And your explaination is very good ❤
Thanks Akshat, I'm glad you liked it! ✌️
I’d been looking all over TH-cam for some nice scroll animations for mobile dev but all I got was for desktop and then I came across your channel- subscribed immediately with notifications on. Can’t appreciate what you do enough man! 🙏
awesome tutorial
I like this guy . I like the fun and amazing content. Thank you Catalin.
Awseome as usual 😍
I am using this nice effect in my project
amazing setup amazing video
Glad you think so! Thanks for sharing your feedback Oğuzhan ✌️
Sir your are creating Great animation
I’m glad you like them, cheers Rohit ✌️
You are magician man
Full support
Keep it up
:)
:)
:)
:)
:)
Thanks a lot Tushar, it means a lot to me ✌️
I hope the person who disliked the video prolly made a mistake. Such great content.. You really helped me. Thank you 🙏🙏
I really love your content, I wish U all the best in Ur endeavors.
Thank you so much! Cheers David! ✌️
Amazing. Thanks alot for your videos.
Glad you like them! My pleasure Julio! ✌️
Fantastic bro! really appreciate it. thanks dear Catalin:)
My pleasure! Thank you Kasra ✌️
You are good in this wow!
Thanks Francis ✌️
Nice video bro..., keep growing
This guy is a genious
Happy New Year!
Happy new year Francis!
Thanks man for your job and imagination xD
😁 thanks you Victor! ✌️
thank you a lot your video is so cool :)
Always great content you are awesome 👏👏👏
Thank you so much 😀 Cheers Bedirhan ✌️
I love this channel 😍, i can study for free 🤟 🤟 🤟 🤟
Superb❤️
This is just amazing
Thank you Vishawajeet, I'm glad you like it! ✌️
Your content needs no special cameras or anything. The quality of content is enough to bind people all along. Hope , you get much more subscribers and attention which you thoroughly deserve.
Thanks a lot Devendra, yet I'm using a ~2000$ equipment to record my face (1100$ camera, 400$ lens and 100$ lights, $150 camlink :)
Pretty Awesome video and camera
Thank you Mirza ✌️I'm glad its better than it was previously!
Thank you for this great content and please keep up 👏👏
Thank you! Will do! Cheers Idir ✌️
We enjoyed your video brother 👍😁😁☺️☺️☺️
Big thanks Praveen ✌️
thank you I'am Student from Thailand 🙏
Keep it up and you're very welcome ✌️
Great Video as normal brader 🥳
Thank you Sochetra, I’m glad you find them useful ✌️
Nice! Thanks
You're welcome Leonel! ✌️
Guy u is amazing!
Thanks Maykel, I glad you like it ✌️
Thanks dude for your tutorials, can we use it in our apps?
Awesome contents ❤️
Thank you so much Pradeep ✌️
Amazing, goog job 💯
Thank you! Cheers Nguyen! ✌️
your Biggest Fan. I Love the looks too.
Thank you, appreciate it Ade ✌️
You are awsome bro and 100 times better than william candolen.
You are a magician, can you make a video to start to React native Animation from scratch for the beginners
Woah! nice Bro
Thank you Gregory ✌️
Could you please do a tutorial series for Animated API ? Since I dont know Animated API, I cant understand many concepts in most of your videos. BTW, nice work on your videos. Love them!
Great suggestion! Also, all my videos are using Animated API. Anything that you're looking for in particular? Thanks Nino ✌️
+1
+1
@@CatalinMironDev What I meant was a tutorial series where you could teach us the basics of Animated API and its working. Like a beginners tutorial. Some concepts in Animated API are difficult to be understood from Documentation.
this is a good idea
Thanks..👍
Thank you too Septe ✌️
Awsome.... 😀😀😀😀
Great, I am glad you liked it! ✌️
Thank u for this tutorial... And i also have one question .... i couldnt figure out how can i achieve bottom sheet animation like dragging panresponder to scrolling scrollview with single panning ... can you help me how this can be done ?
best animation
Wow, thank you ✌️
You're the best ! #BigFan ❤️
Thanks a lot for showing your support Med! ✌️
Hello Catalin, Thanks for the video but does it work the same way for the vertical ones ? it seems not to work as I tried
Dope
hello,How to consume api data in the scrollview position, it is updated in the current position, in react native
Nice
Thank you Thuan ✌️
its magic,, u r wizard
Thank you Deden 🧙♂️ ✌️
@@CatalinMironDev sory for ask to much can you make this auto play that like a carousel 😎😎
I really like this tutorial, keep it up ! Very nice lens, by the way what do you use for microphone ?
Hi Shawwal, first of all thank you so much! About the microphone, I'm using Blue Yeti microphone. Thanks ✌️
@@CatalinMironDev it's my pleasure, thanks a lot for the information
Amazin!!!
I'm glad you liked it! Thanks Henrique ✌️
Hey bro your videos is awesome, can u make react native exchange data between devices using Bluetooth
This is awesome ♥ ♥ ♥ ♥ ♥ 🔥 🔥 🔥 🔥 🔥 🔥 🔥
which font are you using for vscode?
What theme are you using for Visual Code?
Fantastic. I know where I will apply this effect.
Go for it and share the result with me, I'd love to see it. Tag me on Twitter: @mironcatalin. Thanks Igor ✌️
@@CatalinMironDev yes, sure.
I really love your work, can you please show me how to import images and avatar locally ? I mean without importing images from url
I figured this out is you're still interested.
Keep everything the same as the tutorial,
In your array, wrap your images from your project with require("image path"),
And then in your image source,
Apparently there is a different format for uri and local images.
can we add videos beside image
Hi Catalin,
Can we create a table in react native using animation such that, header would be sticky, first and second column would be sticky on scrolling and other customisable ?
It might be possible, I might give it a try tho. Thanks Manas! ✌️
Great Video as usual Catalin, And nice Lens 👌,
btw, what's your keyboard name :D?
Thank you Anas! I'm using Apple Magic Keyboard :) ✌️
From India😄
Nice, looks good. Can I translate some of your tutorial to Spanish for my channel?
Definitely, that will be awesome. Thanks Fermin ✌️
I love you
🤩🤩
✌️
why item height using width from dimensions instead height from dimension (?) thank you
The main reason is because I don't want to make the slide the height of the screen. Thanks ✌️
Your videos are amazing...
I have a dought to ask with you,
My dought is:- Can we build android system launcher app in react native? If yes then how??
I am not sure about it, I haven't done anything like this previously.
@@CatalinMironDev Thank you for your reply
Too much jerk in card when i scroll left to right please help
I love React
❤️
Can you create a video about progressive loading image in flatlist such as blur until done
Unfortunately this is not a mobile feature, instead is more like a backend scenario. The technique is called blurhash: github.com/woltapp/blurhash. This can’t be done directly on the mobile side without getting image header signature. I’ll learn more, maybe there’s a solution. Thanks Kenzie ✌️
I mean you need to have the blurred image as small sized image and you’ll morph to the big one once it was loaded.
@@CatalinMironDev thank you , i ll try it
please guide me where do is start to learn animation
I'm going to release multiple courses about animations. I'll let you know when they'll be available. Thanks Zohaib ✌️
Meanwhile, if you'd like to learn more about animations and have access to the source codes and support me, you can become a Patreon: www.patreon.com/bePatron?u=20582060. Thanks in advance!
Lovely tutorial, but I can't get my project images to show. Why is that ?
Finally figured it out. For anyone who ever has this same issue, image source has a separate format for when you use uri or when you get your image from your project. Basically source={{uri : item.photo}}.
For local
Source={item.photo}.
Make sure to wrap your image in require("image location").
You're welcome.
U think this can work on Androids?
Why images dont show up..
Can you please make a tutorial on how to make custom parallax sticky header with tab-section-list
you can check foodpanda mob app to better understand
That's a great suggestion. Could you please share a recording with me so I know exactly what you're talking about? Thanks Abdul! ✌️
@@CatalinMironDev okay check your inbox
Super bro, how to plan design like this
I don’t know to be honest but I’m glad you like them ✌️
@@CatalinMironDev how to do the favourite (heart animation ) product animation in flatlist for individual products
Gawd
Thanks Aman ✌️
Hello Catalin Miron, I have a question, I joined Patreon and buy a Patreon course from you on November 19th, for monthly payments. But before the deadline, Patreon is asking me to pay again before the deadline. Do you know the reason why?
Hi Justin, I've already sent you a message over Patreon. This is how Patreon manage subscription and this is a monthly payment. Thanks for supporting me! ✌️
plz make tutorials on react native cli
The code should work both ways, expo is react-native cli on steroids. Thanks Bilal ✌️
Could you please make a video about instagram stories in react native.
Is this working 60 fps on low android devices? Why you don't use reanimated. I heard it's perfermonce better. I'd really like to learn why choose Animated. API. Thanks
Yes, this is working at 60fps because we’re using the native driver. Cheers Guven ✌️
@@CatalinMironDev Thank you for quick response. Could you explain us how animation communicate with native side. Because I'm not sure but Javascript thread can be problem with Animated API. I really would love to know more detail. Thank you again for great job
It’s not only an Animated API problem, this can happen to other libraries as well. Performance bottlenecks comes from overwhelming the JS thread, blocking the loop and sending too much information to the UI thread over the bridge.