AWESOME React Native carousel animation 60fps - FlatList and Animated API

🔥 In this video tutorial we will create a beautiful animated carousel in React Native using FlatList and Animated API.
We'll go through:
- How to create a carousel in React Native using FlatList
- How to blur images in React Native
- How to morph between two blurred images
- How to animated images in React Native
----
⚠️ Access full source code: www.animaterea...
Becoming a Patreon will gain you access to multiple mini projects and code sources.
----
Starter code: gist.github.co...
---
Inspiration: dribbble.com/s...
Illustrations by: SAMji dribbble.com/S...
👉👉 Have any questions? Join Discord: / discord .
Want to support me?
- Patreon: / catalinmiron
- BuyMeACoffee: www.buymeacoff...
- Paypal: paypal.me/cata...
----
You can find me on:
- Github: github.com/cata...
- Twitter: / mironcatalin
- Website: batman.codes
---
Timeline:
TBD
#react-native-carousel #react-native-flatlist-carousel #react-native-animated #react-native-animation #react-native-blurred-image #react-native-morph #react-native-60fps

[@techienomadiso8970]

Catalin you are the best Teacher out here for React Native Animations. Your tutorials should be added to react-native docs as official example reference. Great Work!

[@CatalinMironDev]

Wow, thank you so much Francis, I’m glad you think this way! Cheers ✌️

[@charithagoonewardena3095]

I love this. You deserve more user engagement

[@CatalinMironDev]

Thank you Charitha! ✌️

[@zayndominick3842]

Pro tip : watch movies on flixzone. I've been using them for watching lots of of movies these days.

[@brayancolin9377]

@Zayn Dominick Yup, I have been watching on flixzone} for since december myself =)

[@mohammadcastiel3901]

@Zayn Dominick yup, I've been watching on Flixzone} for years myself =)

[@DivineZeal]

Perfect video! Helped me finally understand animated!

[@MrLucaslucal]

You made so much with just native react native's resources, this is amazing, thank you very much.

[@facundoledesma8210]

Awesome video Catalin! Very clean and beautiful! Keep it going!

[@ChandlerVanDeWater]

Your tutorials are so quick and have such a clean approach. Thank you for making these!

[@CatalinMironDev]

I’m glad that you found them useful and easy to follow. Thanks a lot for sharing this with me Chandler ✌️

[@TheSalaho1]

holly shit, you're incredible, there's a fine line between a nice engaging animation and a frustrating one and the ones you're teaching are very engaging ! always appreciate your content!

[@CatalinMironDev]

Thanks a lot for sharing such an amazing feedback! ✌️

[@RVKAWAAA]

Greeting from Argentina!

[@admiralicic]

This channel deserves much more subscribers, great content

[@erlanakylbekovich4586]

Thank you Catalin for this guid and other! You are the best teacher ever!

[@mankim6146]

Hi, I'm waching your vedio in Korea! I think your tutorials are very very eaaaasy to learn and helpful for beginners like me !! Thank you so much !!

[@lucasmoura5698]

Thanks for all the amazing videos and tutorials. Many thanks

[@albertomiguelfiorani7579]

Awesome!

[@EngineerCodewala]

its very good

[@ejdatertas21]

you are not human, you are an angel :)) thanks for your effort

[@saziknows]

You are God's gift to react native

[@stephendelacruzone]

Neat!💎✨👌

[@kevinjeanmichel3824]

Your tutorials are just awesome thanks for what you're doing

[@akbarsheikh5690]

Your design is amazing,beautiful.loved it ....please make more videos like this

[@arjuntt2604]

Sure this guy will reach million viewers in no time.

[@missinglyrics1918]

always great

[@CatalinMironDev]

Thanks Gan, I’m glad that you liked it ✌️

[@khalidkhan5308]

Congratulation on 9k

[@CatalinMironDev]

Thanks Khalid ✌️

[@ayoubbelouadah7195]

Amazing as always *-*

[@CatalinMironDev]

Oh thank you Ayoub ✌️

[@zohrekhedmati1110]

Wowww😍😍😍 It was amazing way to do that, thank you😍

[@myrelaxpoint]

Wow. That was awesome.

[@CatalinMironDev]

I’m glad that you found it useful. Thanks Bhaskar ✌️

[@natnaelagenagnew3169]

you are the best bro ......... i can't thank you enough 🙏

[@sarcasticdna]

I just discovered your channel Loved it Subbed it Looking forward for more 😍❤️. BTW I am new to RN is there a beginner series for animations?

[@bedirhanaygul805]

Thank you for your awesome videos Catalin, you rockkk!! 💯💯✌👏👏

[@CatalinMironDev]

Thanks for sharing this kind words with me Bedirhan ✌️

[@JeanPierreCasanovaFuentes]

I gonna buy you a cup of coffee! you deserve it! I've learn a lot from you!

[@r_alisher]

Thank you a lot of

[@enableDeepak]

You're amazing. I love watching your videos more than OTT shows :D. If possible, please make a video on a full-screen image carousel with a masking effect.

[@smoothreflexsongs5111]

Keep doing this more videos please

[@alexkey9372]

I discovered your channel late but I'm so glad! Out of curiosity, as I'm new to react native animations, all the Animated API functions work the same with with reanimated1 or reanimated2 framework?

[@alon77777]

Short and useful, thanks!

[@CatalinMironDev]

I'm glad that you liked it! Cheers ✌️

[@pranavkumar1818]

C'est tres jolie. Merci !!!

[@ManHaru1]

Awesome!!!! 👍👍 Very useful!!

[@CatalinMironDev]

Thank you ✌️

[@CarlitosUlloa20]

Great, what a great job; Thank you very much for your contribution.

[@amitmehta8554]

You are genuine person

[@CatalinMironDev]

Wow, thank a lot Amit! It means a lot to me. ✌️

[@ehtishamtahir2187]

Your explanation though 👌👌👌

[@riz-l2123]

Your tutorials are absolutely amazing, they've really helped me so much. Do you think you'll release a full project tutorial any time soon? Thanks!

[@CatalinMironDev]

Thanks a lot! I’m working on a full course. Stay tuned ✌️

[@riz-l2123]

@@CatalinMironDev Thanks! You're the best :)

[@gustavolura99]

SALVOU DEMAIS!!!!

[@지울최]

thank so mush , you are the best Teacher

[@programmersohel]

Thanks

[@shawwalmuhammad]

This looks awesome 😎 👍🏻

[@CatalinMironDev]

Thanks for sharing such positive feedback, I'm glad that you like it! Thanks Shawwal ✌️

[@shawwalmuhammad]

@@CatalinMironDev you're most welcome. I really enjoy it and it help me to learn a lot.

[@cfboski2587]

You've taught me so much during the pandemic.. One day i'll repay you!

[@CatalinMironDev]

I’m really happy to hear that my videos helped you. Thanks a lot Bosco ✌️

[@turnbrain3049]

Thank you so much! Your tutorials are so quick and have such a clean approach, How I can make the Flatlist loop?

[@LeandroSimoesArt]

Amazing! Do you have any complete course about react-native animations or are planning to do that sometime?

[@CatalinMironDev]

Hi Leandro, I’m working on it. I’ll let you know once it’s ready. Thanks ✌️

[@AkshatKumawat]

Thank you for asking.. i'm waiting for it 🔥

[@LeandroSimoesArt]

@@CatalinMironDev Thanks! Looking forward to it!!!

[@immortal3164]

love you

[@karemhz]

Really nice, Thanks

[@CatalinMironDev]

Thank you Karem ✌️

[@vitorrazdorov6017]

Realy cool, thanks man for you job)

[@CatalinMironDev]

You're welcome. Cheers Victor ✌️

[@amanngoel]

This is magic ❤️

[@CatalinMironDev]

Wow, thanks Aman, I’m glad you think so ✌️

[@tanujupreti]

That is indeed an amazing one ❤

[@CatalinMironDev]

Thank you Tanuj, I'm glad that you enjoyed the tutorial! ✌️

[@SaadKhan-xf3ry]

as always amazing content, can someone explain what's going on with the input range? is (index - 1) * width means the previous item, index * width = currentItem and (index + 1) * width = next item in flatlist? Thanks!

[@prasanthvijaykumar1317]

Hi Catalin, can you make video for Image slider with zoom in/out in react native

[@phannam7211]

Great!

[@CatalinMironDev]

Thank you Phan ✌️

[@phannam7211]

@@CatalinMironDev Succulent can be picked up and made animated picked on android like ios

[@dilipsuthar2817]

This is awesome :) Can you please let me know which fonts and theme you have used in vscode?

[@Gabriel-zt7pk]

what is the font family in vscode in this video?

[@fahleviikhsanurrizal4449]

how if the pics of data already set in folder?

[@PCPalacetech]

Hey man, which font are you using. Its cool !

[@RVKAWAAA]

Hello boss, well i copy the exactly code and my Android App does not work..it just close after the first Scroll...and it isn't a Expo issue...because i use npx react native init...can you say me which is problem?

[@MJ-vx5cz]

where did you learn all of this ?

[@-leovinci]

Learn so much! Question: Can we implement backdrop blur like CSS(backdrop-filter: blur) without other libraries?

[@CatalinMironDev]

Unfortunately no, you need to use BlurView for it:(

[@vicheanath9412]

Please compare about expo and react native cli

[@charithagoonewardena3095]

I think for android you have to use elevate to get the shadow effect yeah?

[@donirizki2717]

Awesome Carousel animation with React Native

[@CatalinMironDev]

Thank you! Cheers Doni ✌️

[@haibertbarfian6343]

Hey Awesome video but can this be done in Reanimted V2 ? the community is moving toward Reanimated to be able to harness the power of having animations run on the UI thread. Unfortunately I cannot see any videos covering carousels using reanimatedV2

[@theintrovertedguy73]

Awesome stuff brother. There is a lot to learn from you. pls, keep teaching :D btw I know you showed an animation way of doing it, but if we do it with imageBackground, is there any problem?

[@leamsilee9284]

I learned so much from this video! Thank you! I have a question. It doesn't recognize the useRef (that refers to the flatlist) in android. The next and previous button is acting weird because of that. Is there another way to do it?

[@willenleal1099]

Thank you so much for this video! I tried to follow your tutorial on the Animation for the Flatlist for the movies video. I could not make it work there. But using the opacity technique with the map function made the backdrop work on android. Idk why but Flatlist items with absolute position do not work on android. :-(

[@lifegrowth9389]

Shall we.... Let go Sir

[@CatalinMironDev]

Hey, ho, let’s go ✌️

[@npaul1440]

Im not sure why but im getting error as "InputRange must be monotonically non-decreasing " for the input range for background Image map range

[@charithagoonewardena3095]

Waiting for your next vid.. :D

[@CatalinMironDev]

It’s coming today ✌️

[@charithagoonewardena3095]

I've set the bell. KZbin, please let me be the first viewer this time

[@abdullahshahid6725]

What is your vscode font name

[@oscarparedez1417]

Is there a way to make this flatlist move through the images automatically?

[@dambik]

Wow, How to make a VS CODE Theme like that??? ⭐⭐⭐⭐⭐

[@hetpatel958]

Vs code Theme please. Nice work. Keep it up. Love from India.

[@CatalinMironDev]

Hi Het, VSCode theme: Palenight, font: Operator Mono. Cheers ✌️

[@all-in-all7862]

I love this video, Please can you create drag and sort or rearrange image in Flatlist.Thanku

[@CatalinMironDev]

Great suggestion, I’ll think about it and see what I can come up with. Thanks Pradeep ✌️

[@all-in-all7862]

@@CatalinMironDev Thanks brother

[@inthefuture946]

Really nice videos. Thanks a lot. Can you also make a video for auto swiping of carousels in addition to the scroll function.

[@mohammadsadman8567]

great one brother! i have one question if i use your animation tutorials in low end android mobile! will it support low end android mobile! will it hang or stutter?

[@CatalinMironDev]

Even on low end android devices this will run at 60fps. Thanks Mohammad ✌️

[@mohammadsadman8567]

@@CatalinMironDev Thank you for your resources ❤️

[@hendoitechnologies]

Without background can you repost this carousel videoo animation please

[@floodyboy5307]

Big wooow 😍👌🏼

[@CatalinMironDev]

I'm glad that you liked it! Thanks Floody boy ✌️

[@ahsanfarooq6755]

how to add infinite scroll on this Flatlist? i want to repeat my content when data in FlatList ends

[@soloogho4937]

hello. your editor font is not good for programming

[@NaveenKumar-fo4kz]

Bro bro please make expo with full firebase.

[@CatalinMironDev]

Maybe in the near future I'll shift to something else other than animations. Right now there are so many things that I'd like to tackle that I can't do other type of tutorials. Cheers and thanks for your great suggestion Naveen! ✌️

[@NaveenKumar-fo4kz]

Ya but please make complete firebase , expo with function based components tutorial because no one make a video about this type perfectly. why I am saying means because lots of person's are working in real time project ,so we get more viewers for our channel 🤗

[@charithagoonewardena3095]

Bro, your contents are amazing 🤩🤩🤩🤩❤ but your intro is so annoying 🤣

[@CatalinMironDev]

Thanks and I’m glad that you like my videos. Cheers Charitha ✌️

[@CatalinMironDev]

Btw, what do you mean by "intro is so annoying"? Thanks Charitha!

[@charithagoonewardena3095]

0:37 here. This one

[@devendrayadav5683]

This is not run in Android only run ios

[@everystack]

none of the tutorials work nowadays

[@cristiancamilosanchezardil9730]

Awesome !!!