No video :(

Advanced FlatList Carousel Animation in React Native using Animated.API

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

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

50% 1

🔥 In this video tutorial you'll learn how to create an Advanced React Native Carousel using FlatList and Animated API from React Native.
We'll go through:
- How to create and animated a FlatList carousel pagination
- How to animate a color or backgroundColor in React Native
- How to use Animated.modulo and Math for animations
----
⚠️ Access full source code: www.animaterea...
----
Starter code: gist.github.co...
👉👉 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
#advanced-flatlist-animation #react-native-carousel #react-native-pagination #react-native-background-animation #react-native-color-animation #react-native-animated-pagination

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

16 авг 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

You are one of the best on this platform, I learned more about react native animations in these 20 minutes than anywhere else. Thank you!

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

Wow, thanks and I'm really glad to hear this! Thanks for taking your time to share your feedback Eden ✌️

@DevRSC Год назад

Your tutorials are amazing! As a beginner in React Native, I truly appreciate the effort you put into making them. Please keep them coming, they're incredibly helpful for aspiring front-end designers like myself.

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

WOW! I want to implement it into my project :D

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

Go for it! Also share with me the result and ping me if you need any help! Thanks Derzh!

@amanaswani1421 Год назад

Man that was lit !!! ❤‍🔥❤‍🔥🔥I never knew we can create such fantastic animations using RN. great job man keep it up, and thanks for making such wonderful tutorials.

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

I really wish I can give 1,000 like bro. You're awesome and please make more RN tutorials. As far as am concerned no one can touch your talent.

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

Amazing as always! Thank you for your videos. Suggestion for next video: tab view with nice spring animation 😀 Tab view is something that is commonly used but no good tutorials with animations.

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

That’s a great suggestion. Do you have a video showing this animation or anything? Thanks Milan ✌️

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

@@CatalinMironDev If you have IPhone just take a look at Phone - Recents. You have a tab slider at top (although no spring on the tab switch) and then the list animates. Here is a picture support.apple.com/library/content/dam/edam/applecare/images/en_US/iOS/ios13-iphone-xs-phone-edit-recent-callers.jpg

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

@@miladhashemi7378 So you want to have the filter animation based on tab selection?

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

@@CatalinMironDev Yes and also a spring animation on the tab selector 😀 Think it would be a cool video tutorial. People can learn how to animate list changes etc. ❤️✌🏼

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

Never Stop!!!!!!!!!! This was amazing!!!! Best video on youtube!

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

Thank Boss, you turning the impossible to be possible with you code. i love you man

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

Almost 7k dude you're awesome!

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

So close! Thanks Tama for showing your support! ✌️

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

@@CatalinMironDev you've got the 7k! well deserved!

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

Hi!!! Thanks for this... i'm Brazilian and im very fan of your work

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

You are amazing catalin. I'm excited to watch your work. Would you consider doing a training where you can explain this animation class in detail? I want to run animations like you :)

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

Really helpful and easy to learn, thanks so much for your videos. Learned a lot! :D

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

Your videos are extremely helpful to me, I really appreciate the time and effort you put into them. You make learning React-Native exciting! :)

@uzochukwu1556 Год назад

Bro you're so amazing, I love u. Thanks 💯💯

@MantuKumar-in2qq 3 года назад

wooohh.. You are an artist man. I want to learn this, This is lit.

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

thank you mannn !!! seriously waiting for this one

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

Always amazing. Really looking for the tutorial making intro slide with next prev button. Please do it when you have time. Thank you so much for sharing everything

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

Hi Anh, so you want to have a next/prec buttons on this carousel? Thanks ✌️

@428Tapes 3 года назад

The best RU-vidr ever

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

another video another great thing! thanks again Catalin. really appreciate it.

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

You’re welcome, I’m glad you liked it. Thanks Kasra ✌️

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

Awesome stuff! Congrats 👏🏼👏🏼👏🏼👏🏼

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

My friend, you are very good, Congratulations !!! Top, top top ...

@vladiiivlogs8068 Год назад

Excelente video ya me suscribí a tu canal, éxitos totales 💪😁

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

Muito bom! Excelente exemplo e fácil de entender. Parabéns pelo vídeo!! (from Brasil)

@bsakilobm Год назад

please tell me any possible to use gradient color if possible how ?

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

learned a lot from this great lesson.

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

Thank you boss amazing tutorial !!

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

very good! Thanks and "salve" from Brazil!

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

I’m glad you liked it Raphael! Thanks and “salut” from Romania ✌️

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

Awesome! keep going in the same direction!!👍👍👍

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

Never disappointed, always great

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

Thank you Yulianto! I'm glad that you like it! ✌️

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

Amazing!!!

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

smooth tutorial as usually 💯

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

Appreciate that Gorhom! 🤗

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

Great video. Thanks Catalin!!! Question: Why const Indicator = ({scrollX}) => ....... and not: const Indicator = (scrollX) => .......

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

Thank you brow, you help me a lot!!

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

amazing tutorial as usual 👍🏻

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

Thank you! Cheers Shubham! ✌️

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

Excellent, Can you do a tutorial series for beginners?

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

You deserve subs in millions 🔥

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

One day I'll reach 1M subs! Thanks for your support Akshat! ✌️

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

@@CatalinMironDev i'm sure ❤️ you've awesome content

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

Catalin, you're the best 😍😍! Can you create a tutorial explaining how to work with responsive layout in RN? My design always breaks when I change the device

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

Great suggestion! I'll think about it Pedro! Thanks ✌️

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

Cool stuff.. Please continue the good work and tell us how did you start ur journey in Animations..👌👌

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

Thanks Ankush, that is a great suggestion. ✌️

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

IT WAS GREAT !!! you help me a lot just one thing somebody let me know how to out the select screen data on console log?

@front_interviews Год назад

what music is playing in the background?

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

amazing work

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

Quick question though. how do you add on click listener. as when i click a button it shows another slide?

@silviaamanda9700 Год назад

THANKYOU!!!!! 😭😭

@front_interviews Год назад

Thank for this videu! Very usefull for my! What vscode-theme using in this video? it nice

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

sensational, congratulations!

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

Thank you Aislan! ✌️

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

Thanks!

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

amazing work !!

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

Glad you think so!

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

Thank you bro

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

You are the master

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

Thank you Francis ✌️

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

thanx for the lesson , you create awesome and useful animations in RN . I have a question , why you do not use Reanimated v2 package ?

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

Thanks Mirali, I’m creating a Reanimated2 course now, stay tuned for that. Thanks ✌️

@shivamkumar-td8qf 3 года назад

you are awesome.

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

This video is so helpful !!!

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

I’m glad you liked it. Thanks ✌️

@codeprovs 2 месяца назад

thank you

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

You are amazing .... Love You :)) ... God Bless You

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

Thank you so much! You too Tushar ✌️

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

please please create a course with full projects love your content as a web dev.

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

I'm working on it. Thanks Umer! ✌️

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

Very Awesome 🔥

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

Glad you like it! Thanks Anas ✌️

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

I have one word! WOOOWWW!!!!!!!❤️

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

Thank you! I'm glad you liked it! ✌️

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

Always great

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

Thank you! ✌️

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

React native vs flutter? Which will you chose for faster development

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

I am not the best person to do this comparison since I have almost 6 years of React Native experience:)

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

@@CatalinMironDev I love react native but, I am using flutter past 1 year and flutter is best for ui and fast development but there are lot of issues that can't be done on flutter !

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

Really great job! How can I implement this carousel like an infinite loop? For example, when I get the last item and move right, I go back to first item.

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

Nice work, you could enable subtitles in your videos, it would help a lot.

@sarahali-wn5sd 2 года назад

Love the video. I've watched a lot of videos on different types of page indicators but what happens when the data is large? It doesn't look very good when the bottom is completely covered in dots. How do I fix that? :(

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

thank u so much brother :)

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

awsome! so beautiful

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

Thank you! Cheers Dung! ✌️

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

Bad event of type undefined for key contentOFFset This error is repeating as soon as I am swiping the carousel. If anyone knows the solution for this reply to this comment.

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

the key should be `contentOffset` and also ensure that the FlatList is an `Animated.FlatList`, lastly that Animated is imported from react-native package. Thanks Aditya ✌️

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

wow you so brilliant ! Can you share how to learn animation for beginners?

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

THANK YOU!!!! Using this in a project right now. One question though, how do I implement a manual scroll button, say scroll to the next "screen/page" on click of that button? possible?

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

This is something that I'll tackle in an upcoming video tutorial. Adding next/previous buttons to this carousel. Thanks Dayo!

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

Awesome !!

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

Thanks Hanif ✌️

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

If I wanted to use a typescript template would it break anything if I follow your tutorial? Also, Great video!

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

Hello friend, what theme are you using in visual study code?

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

Awesome!

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

Thanks a lot Erlang ✌️

@alfaizkhan2793 Год назад

What Font you are using in VS code?

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

Hi Catalin Miron, the first thing i want to say is thank you so much for the courses you did, and i learned a lot of thing from it, but in this tutorial i am getting an error that is when i type scrollX.interpolate then i get the log, its say undefined is not an object, but when i log only my scrollX i get 0 from this, hope you will help me fix it, Regards.

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

Same here, did you manage to fix it?

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

@@alexanderrisbey6768 i got the same error, did you fix it?

@jose-x-2826 2 года назад

@@guilhermerdg So, I've the same error Here, after googled I found the interpolate was renamed to interpolateNode, with react-native-reanimated^2.9.0, but I still have problem with this, So anybody here solved this problem? Thanks...

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

bro thanks

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

What kind of theme you are using with your code editor

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

Can apply this to an on boarding screen?

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

Thank you

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

Nicee 👍🏻 what vs code theme do you use?

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

wow esti super!! imi placut cum zici double smash dislike button :) Good luck. One of the best channel

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

hahaha, thanks a lot Sharof, it means a ton to me ✌️

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

Can you create component handle image such as crop, brightness or fill color :v I'm very glad to see it :v Thanks

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

Hi guys, I'm a React Native Developer of 5 years of experience. I have two apps on the the Google playstore and one app on the Apple App store. I have a course that I'm still working on and in my free time, I like to make RU-vid tutorials. I'm looking for a job in React Native. Can someone help?

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

thats where i heard it, he sounds like Zlatan!

@principe.borodin 3 года назад

Fantastic, I will pratice on night

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

You can do it and HAVE FUN! Share with me the result! Thanks Igor ✌️

@principe.borodin 3 года назад

@@CatalinMironDev Sure.

@principe.borodin 3 года назад

I got finish, was identical.

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

Please take this to app intro. With buttons and changing flatlist index with on click and open another screen after last index

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

Great suggestion Muhammed!

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

Gawd !!

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

hi guys, I really liked the video, I liked it so much that I tried to create the same project but on typescript, but I had some doubts & and problems with the Indicator because in my Animated.FlatList I had a problem in onScroll={Animated.event( [{ nativeEvent: { contentOffset: { x: ScrollX } } }], { useNativeDriver: false } )} the code are saying that I need to put a Mapping on contentOffset: { x: ScrollX }, someone could help me please?

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

Error: Type 'number' cannot be assigned to type 'Mapping'