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

Подписаться 31 тыс.

Просмотров 48 тыс.

50% 1

🔥 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

Опубликовано:

11 янв 2021

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 138

@techienomadiso8970 3 года назад

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 3 года назад

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

@charithagoonewardena3095 3 года назад

I love this. You deserve more user engagement

@CatalinMironDev 3 года назад

Thank you Charitha! ✌️

@zayndominick3842 3 года назад

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

@brayancolin9377 3 года назад

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

@mohammadcastiel3901 3 года назад

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

@MrLucaslucal Год назад

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

@TheSalaho1 3 года назад

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 3 года назад

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

@ChandlerVanDeWater 3 года назад

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

@CatalinMironDev 3 года назад

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

@facundoledesma8210 Год назад

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

@ejdatertas21 3 месяца назад

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

@DivineZeal 4 месяца назад

Perfect video! Helped me finally understand animated!

@erlanakylbekovich4586 2 года назад

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

@admiralicic 3 года назад

This channel deserves much more subscribers, great content

@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

@akbarsheikh5690 3 года назад

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

@kevinjeanmichel3824 3 года назад

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

@RVKAWAAA 3 года назад

Greeting from Argentina!

@arjuntt2604 3 года назад

Sure this guy will reach million viewers in no time.

@bedirhanaygul805 3 года назад

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

@CatalinMironDev 3 года назад

Thanks for sharing this kind words with me Bedirhan ✌️

@user-ir6gd4ux3g 2 года назад

thank so mush , you are the best Teacher

@zohrekhedmati1110 3 года назад

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

@JeanPierreCasanovaFuentes 3 года назад

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

@sarcasticdna 3 года назад

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?

@saziknows 3 года назад

You are God's gift to react native

@CarlitosUlloa20 2 года назад

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

@cfboski2587 3 года назад

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

@CatalinMironDev 3 года назад

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

@natnaelagenagnew3169 Год назад

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

@albertomiguelfiorani7579 2 года назад

Awesome!

@enableDeepak 2 года назад

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.

@EngineerCodewala 2 года назад

its very good

@khalidkhan5308 3 года назад

Congratulation on 9k

@CatalinMironDev 3 года назад

Thanks Khalid ✌️

@riz-l2123 3 года назад

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 3 года назад

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

@riz-l2123 3 года назад

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

@ayoubbelouadah7195 3 года назад

Amazing as always *-*

@CatalinMironDev 3 года назад

Oh thank you Ayoub ✌️

@alon77777 3 года назад

Short and useful, thanks!

@CatalinMironDev 3 года назад

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

@alexkey9372 3 года назад

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?

@vitorrazdorov6017 3 года назад

Realy cool, thanks man for you job)

@CatalinMironDev 3 года назад

You're welcome. Cheers Victor ✌️

@stephendelacruzone Год назад

Neat!💎✨👌

@myrelaxpoint 3 года назад

Wow. That was awesome.

@CatalinMironDev 3 года назад

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

@turnbrain3049 2 года назад

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

@LeandroSimoesArt 3 года назад

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

@CatalinMironDev 3 года назад

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

@AkshatKumawat 3 года назад

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

@LeandroSimoesArt 3 года назад

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

@missinglyrics1918 3 года назад

always great

@CatalinMironDev 3 года назад

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

@ManHaru1 3 года назад

Awesome!!!! 👍👍 Very useful!!

@CatalinMironDev 3 года назад

Thank you ✌️

@shawwalmuhammad 3 года назад

This looks awesome 😎 👍🏻

@CatalinMironDev 3 года назад

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

@shawwalmuhammad 3 года назад

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

@ehtishamtahir2187 3 года назад

Your explanation though 👌👌👌

@smoothreflexsongs5111 2 года назад

Keep doing this more videos please

@pranavkumar1818 3 года назад

C'est tres jolie. Merci !!!

@SaadKhan-xf3ry 3 года назад

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!

@tanujupreti 3 года назад

That is indeed an amazing one ❤

@CatalinMironDev 3 года назад

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

@amitmehta8554 3 года назад

You are genuine person

@CatalinMironDev 3 года назад

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

@karemhz 3 года назад

Really nice, Thanks

@CatalinMironDev 3 года назад

Thank you Karem ✌️

@r_alisher 3 года назад

Thank you a lot of

@RVKAWAAA 3 года назад

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?

@immortal3164 21 день назад

love you

@programmersohel 6 месяцев назад

Thanks

@amanngoel 3 года назад

This is magic ❤️

@CatalinMironDev 3 года назад

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

@fahleviikhsanurrizal4449 2 года назад

how if the pics of data already set in folder?

@Gabriel-zt7pk Год назад

what is the font family in vscode in this video?

@dilipsuthar2817 3 года назад

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

@npaul1440 3 года назад

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

@gustavolura99 Год назад

SALVOU DEMAIS!!!!

@PCPalacetech 2 года назад

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

@prasanthvijaykumar1317 Год назад

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

@theintrovertedguy73 3 года назад

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?

@charithagoonewardena3095 3 года назад

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

@-leovinci 3 года назад

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

@CatalinMironDev 3 года назад

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

@vicheanath9412 3 года назад

Please compare about expo and react native cli

@leamsilee9284 3 года назад

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 3 года назад

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

@MJ-vx5cz Год назад

where did you learn all of this ?

@oscarparedez1417 3 года назад

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

@hendoitechnologies Месяц назад

Without background can you repost this carousel videoo animation please

@abdullahshahid6725 Год назад

What is your vscode font name

@charithagoonewardena3095 3 года назад

Waiting for your next vid.. :D

@CatalinMironDev 3 года назад

It’s coming today ✌️

@charithagoonewardena3095 3 года назад

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

@haibertbarfian6343 3 года назад

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

@donirizki2717 3 года назад

Awesome Carousel animation with React Native

@CatalinMironDev 3 года назад

Thank you! Cheers Doni ✌️

@phannam7211 3 года назад

Great!

@CatalinMironDev 3 года назад

Thank you Phan ✌️

@phannam7211 3 года назад

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

@hetpatel958 3 года назад

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

@CatalinMironDev 3 года назад

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

@ahsanfarooq6755 3 года назад

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

@lifegrowth9389 3 года назад

Shall we.... Let go Sir

@CatalinMironDev 3 года назад

Hey, ho, let’s go ✌️

@mohammadsadman8567 3 года назад

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 3 года назад

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

@mohammadsadman8567 3 года назад

@@CatalinMironDev Thank you for your resources ❤️

@inthefuture946 3 года назад

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

@all-in-all7862 3 года назад

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

@CatalinMironDev 3 года назад

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

@all-in-all7862 3 года назад

@@CatalinMironDev Thanks brother

@soloogho4937 2 года назад

hello. your editor font is not good for programming

@dambik 2 года назад

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

@floodyboy5307 3 года назад

Big wooow 😍👌🏼

@CatalinMironDev 3 года назад

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

@NaveenKumar-fo4kz 3 года назад

Bro bro please make expo with full firebase.

@CatalinMironDev 3 года назад

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 3 года назад

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 🤗