React Native Scroll Item animation effect - FlatList and Animated API

[@playology1740]

Honestly speaking you are my mentor.. I am learning Animation through your tutorials. I am using your tutorial as the guiding book in my application. I am basically using the techniques which you have taught in your tutorials. Thank you so much for delivering such remarkable tutorials.

[@yashaskirito]

This channel is a gold mine, all for the taking ✨

[@CatalinMironDev]

Thank you Yashas ✌️

[@faizanansari975]

@@CatalinMironDev bro i have been stuck on creating a time picker where the scroll is looping means in vertical scroll at the top of first index the last index is shown u can scroll it in loop either upward or downward so can u please make demo how to achieve at time picker as ios using React native please

[@techienomadiso8970]

This kind of content is rare to find! Thanks Catalin! Great Salutes from Kenya!

[@CatalinMironDev]

Thanks a lot Francis, it means a lot to me ✌️Greetings from Romania 🇷🇴

[@myrelaxpoint]

I wish this channel soon gets million subs. Your content is pure gold.

[@simons9693]

At first I was not interested, now I follow you and sometimes I watch your videos for fun. You are the king of animations.

[@Tech-3883]

king of animation . Thank you

[@re.liable]

That's amazing. I'm just starting to learn React Native. Will definitely make use of all the tips you give!

Really nice job

[@ariyaman90]

I can't understand why some people didn't like it. It was very nice. Thank you

[@harshjain4256]

I was searching for this animation all over the intenet and finally u made a video

[@CatalinMironDev]

I’m glad that this helped you. Thanks Harsh ✌️

[@harshjain4256]

@@CatalinMironDev can you also make animation tutorials on flutter?

[@CatalinMironDev]

@@harshjain4256 I'm not a Flutter developer and I've never played with it and I don't have any plans on doing any Flutter tutorials in the future. Thanks ✌️

[@prakashmardi25]

interested in working with me Harsh in a crypto trading app?

[@harshjain4256]

@@prakashmardi25 tell me the details

[@cfo3049]

Great example, thank´s for your work.

[@Hirbodffm]

This was by far the best explained animated flatlist video I’ve seen. Hopefully we will see Animated2 content as well :)

[@cherishmashree7302]

Amazing Bro!! The animation works perfectly. Very detailed explanation. You are doing great. Keep posting such videos.

[@deckbietcaijhet]

Just found your chanel, come from vuejs and android studio, now i am learning Reactjs and React Native, great content subscribed !

[@CatalinMironDev]

Thank you. I hope that you’ll learn something new here, feel free to leave a comment if you have any issues, I’ll do my best to help you as much as I can. There’s also a discord link in the description, you can join the channel and ask there for help. Thanks ✌️

[@principe.borodin]

Fantastic, Awesome.

[@CatalinMironDev]

Great! Thanks Igor ✌️

[@lokeshchauhan6253]

Great tutorial man

[@hansderly]

You really should create a course on animation for React Native! Good Work!

[@136machiner]

Thanks for tutorial!

[@ZiosNeon]

One of the best react native channels out there, you are awesome.

[@nats7367]

This is so great! I wish your videos get recommended by YT to gain more subs

[@almobarmij]

As always you make premium content with highest quality. Keep it up Catalin.

[@CatalinMironDev]

Much appreciated! Thank you Mohamed! ✌️

[@cristiancamilosanchezardil9730]

Which iPhone emulator do you use? Thank you for tutorial is awesome

[@arunprasath8649]

u r a lifesaver bro.

[@arnabganguly6220]

Your animation tutorials really helped me a lot. 💕

[@charithagoonewardena3095]

Let's goooo. Thanks for this. This is great

[@CatalinMironDev]

I’m glad you found it useful. Cheers Charitha ✌️

[@jeffwebb101]

Thanks, helped me understand and implement Flatlist and get a great stylish animated list. 👍👍

[@charithagoonewardena3095]

Waiting for the next one. Addicted!

[@alon77777]

Super useful, I will definitely try to use it in one of my next projects. As always Catalin, thanks for sharing!

[@CatalinMironDev]

Thanks a lot Alon. Don’t forget to share it with us ✌️

[@wubshetdemissie2933]

Nice job man.

[@BopBeef]

Thank you for this i just animated my horizontal scroll with this tutorial

[@kikebecerra]

Mindblowner tutorial 👏👏👏

[@alaspuresujay]

That's what I was actually searching all over. Thanks 🥰. BTW which theme you are using in vs code?

[@Sami-mm]

Awesome!! Really like your way explaining and gives me new ideas to explore too :)

[@farhatulsk]

Great work😃👍

[@007gambo]

Great work! Please make video about Facebook style pinch to zoom ability (PinchGestureHandler)

[@anastely6144]

As always 🔥, Thanks Catalin 🤞

[@CatalinMironDev]

Thanks a lot Anas ✌️

[@viralchudasama3624]

You are amazing bro, your teaching technique is also easy to learn. Thanks for the best tutorials Keep going 👍

[@marcellopisciottano5338]

Excellent, thank you very much for sharing! Very clear, very good instruction for each property. And with a Faker bonus, amazing! Keep it up.

[@sujatagunale7079]

Me waiting for your videos is like Me waiting for holidays 😂 .. Need more & more .. Your way is more superficial than prior .. Thank you for creating 💜

[@CatalinMironDev]

Thank you so much Sujata, it means a lot to me ✌️

[@alyankhan806]

Amazing! learned so much

[@rvdev3800]

Very good explanation, thank you!

[@korpemre]

Why I find every video of yours great 👏👏

[@CatalinMironDev]

Thanks Emre, I’m glad you found all of them useful! Cheers ✌️

[@jalalhasanov9958]

Perfect explanation.. Thank you very much.. You are amazing man..

[@harshdeepsaiyam570]

That was awesome!

[@krishnavishwakarma908]

Thanks a lot..... 🔥 🔥 🔥

[@charbelmansour8925]

Notifications on ! :D

[@redouaneserir1293]

very well explained ,very helpful thanks

[@zainkhalid8038]

Awesome Tutorial

[@mojo_jojo16]

Thank you very much for your tutorial videos, Mr. Miron. By the way, friends, I found the beautiful music playing in the background:) Dan Henig-Empire Seasons. With this music we can create beautiful animations.:))))

[@CatalinMironDev]

Thanks! I think that I’ve mentioned it in some past comments. Cheers ✌️

[@sheheryarqazi1006]

thank you very much master react Native

[@mirids9579]

Please dude, make tutorial about scrollToIndex in FlatList with different height items. You are best bro.

[@CatalinMironDev]

That’s a great suggestion! I’ll take a look and see with what I can come up with. Cheers Miri ✌️

[@korneevxxx]

Yes, I also would be very thankful for the one with various heights. Great tutorial!

[@alexzil2142]

If you're frustrated and confused as to why whenever you are scrolling, at some point it doesn't start at the top, it's because you are not properly accounting for the height of the parent views and equally the margin you might have given on the each parent view. Here is what I did different: const [viewHeight, setViewHeight] = useState(null) const onLayout=(event)=> { setIsLoadingViewHeight(true) const {x, y, height, width} = event.nativeEvent.layout; if (!viewHeight) setViewHeight(height) setIsLoadingViewHeight(false) } // This function gets the view's height. var inputRange = [-1,0,1,1] if (viewHeight) { inputRange = [ -1, 0,((viewHeight * index) + (index * 20)),(viewHeight * (index + 5) + (index * 20)) ] } const scale = scrollY.interpolate({ inputRange, outputRange: [1,1,1,0], extrapolate: "clamp" }) I gave my each of my parent view a margin Vertical of 20. And in order to account for this, you need to multiply the index by 20 then add it to the view height multiplied by the index too. Remember you are trying to calculate the distance between the top and each view in order to say when to begin and stop animation. In a scrollview, the distance increase on each scroll and the margin is equally included in the distance. Hopefully this helps someone!!!! cheers

[@fidelendzime6733]

good night brother; your comment is not clear you use variables that you have not defined, you declare a function that you never use,...

[@alexzil2142]

@@fidelendzime6733 okay bro. Sleep tight.

[@fidelendzime6733]

@@alexzil2142 I say it because I want to understand. I am blocked

[@fidelendzime6733]

@@alexzil2142 Need your help please

[@alexzil2142]

@@fidelendzime6733 I’ll check again and try to paste my code below your reply. Currently can’t do it now. Maybe about 10 - 12 hours from now. Or earlier

[@VareshTapadia]

Great content Catalin. Please continue... (claps). Can you point/show how we can achieve the same effect when the items are comming out from the bottom as well? That would complete/complement the effect nicely.

[@RippZzGaming]

did you find out how to do that already? was wondering aswell and didn't get it to work by myself

[@k.a6]

Wow, this is Awesome

[@luisbrazilva]

How do you replicate that same animation at the other end of the list when it enters and leaves the screen? Can you point me to somehwere I can find some guidance on that?

[@irfanbaloch7174]

As always high quality content

[@CatalinMironDev]

Thank you so much Irfan ✌️

[@endlessspirituality3521]

Your animation tutorials are just magnificent. BDW which VS code extensions you particularly use while working with the react native as I don't get that good suggestions or autocomplete of code while typing

[@coderbites]

You are great Catalin Miron lots of love 😘 I have learned to much from you 🙂

[@umerfarooq8618]

You have amazing content surprised u should be having a ton more subscribers

[@mihaivancsa7815]

is there a way to apply the same animation but to the elements that are at the bottom while scrolling?

[@navodadesilva99]

You make the best react native apps keep it up love your work ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ 🔥 🔥 🔥 🔥 🔥 🔥 🔥 🔥

[@TheSalaho1]

nice tutorial, btw you type really fast, what's your wpm, and what keyboard you're using?

[@CatalinMironDev]

I don’t remember what was my average wpm, but I can do a test to see it. I’m using a magic keyboard ⌨️

[@sykn3z]

Greeaaat wooorkk maaaaaaaaaaaaaaaaaaaaaaaan! Keeep it uppppp dude! U rocks!

[@CatalinMironDev]

Wow, thanks a ton ✌️

[@sharofazizmatov1000]

wow great. Thank you for your time. The thing you are doing here are really great. Keep on si Multumesc inca o data!

[@CatalinMironDev]

You welcome Sharof ✌️ Pentru putin Sharof ✌️

[@hamidkhan-ed8ze]

greate and amazing animations ,thanks for sharing with us.....

[@shubhamgoyal977]

How can I do the same for the bottom part of the screen as well? like when an item leaves the screen from the bottom, it should get smaller? Basically I want it to be big when it's in the centre of the screen and when it moves away from the centre it should get smaller.

[@MrBony]

Excellent tutorial. I followed along and everything works. However, while scrolling, the items start animating without reaching the top of the window. This leads to items disappearing on scrolling on a long list. Is there something I missed? Could you please provide a hint on this? Thanks for this beautiful tutorial.

[@ThomazMartinez]

There is a problem with big lists where the animation starts moving down the scroll

[@skarfacePT]

I'm trying to do the same effect in the lower part of the list (like the IOS notification tray). Some idea? Thanks.

[@ahmedam77]

I love it!

[@Legend_UP61]

Thanks Sir...❤❤❤❤❤❤❤

[@hrishikeshkedar2574]

Great Stuff!!

[@code_lift]

Excellent content! Per reanimated docs: interpolate method is now out dated and replaced with the new interpolateNode

[@chandranathgupta4500]

you are a genius man. Thank you so much...

[@prakashmardi25]

interested in working with me Chandan in a crypto trading app?

[@tabaicanking3701]

You the best bro thanks

[@CatalinMironDev]

Thanks a lot John ✌️

[@abdullahalnayem1849]

Thanks a lot!

[@mobileappsdevware264]

amazing ideas, thanks

[@CatalinMironDev]

I’m glad you liked it Akram ✌️

[@TienNguyen-ll8nc]

thank you

[@learnandlearn849]

Thanks for making amazing aimations. Can you make an Video for Ios style picker custome picker that will work on both android and Ios platform may be helpful

[@fouadmagdy3301]

Transform not working friend what ahould i do

[@chamaldezilva]

awesome explaining! just hit the red button

[@danielweb]

I so wanted to apply the shadow property... but it's only available for IOS. Is there another way to apply it, I'm using expo

[@Galaxy_9900]

I use this animation in sectionlist but all the sections animate at the same time how can we separate this?

[@jairosoares6877]

Great video! thanks

[@CatalinMironDev]

Glad you liked it! Thanks Jairo ✌️

[@arielsuarez5471]

Hello! I've just started learning React. Your tutorials are great. Please, keep up the good work. Also, I wanted to ask you how you make the view of your app display. I'm using VSCode and trying to request the .jsx file in the server (localhost), but all it displays is the code itself in a black screen in the browser.

[@charbelmansour8925]

crazy!!!

[@enes_town]

You so helped me. You are awesome ❤️

[@CatalinMironDev]

Glad I could help! You're welcome. Thanks Enes ✌️

[@prathameshsagvekar6696]

Hello, liking your work! When last FlatList Component element hides below BottomTabNavigator. How can we up that component to become full visual ?

[@MangoFlamingo]

Well done. this channel should have more views than this

[@junangameplays3271]

Drag and Drop and Drag and Sort please you teach Very well!!!

[@sokvebolkol3504]

Thank you sir

[@andresribeiroo]

Awesome 💥 A suggestion for a video: animated login page

[@CatalinMironDev]

I’m working on it Andre ✌️

[@ThinhTran-yu9sn]

Awesome tutorial thank you. Which font do you use for VS Code?

[@shiekhpalace2401]

Please tell which font are you using for vs code

[@isaaccastillo8628]

Catalin you are amazing! God and LORD Jesus bless you so much! Many greetings from Chile dear friend!

[@CatalinMironDev]

Thank you so much!

[@l2l361]

Awsome!!! Thanks...

[@CatalinMironDev]

You’re welcome! Cheers ✌️

[@mohamedamineboutiti9993]

Hello , When we build an application in react native (Expo) in PlayStore or AppStore and there is packages that are installed inside the application and upgrade here version automatically , the questions is there is a risk of a crash application in production ? Thanks.

[@ddikodroid]

Great video!

[@CatalinMironDev]

Thanks a lot Diko ✌️

[@aUbilla]

Hello, amazing work!, do you have some animation tutorial to show/load data fetched en flatList???

[@vishwasagrawal4700]

I wanted ask where do you find these animations which you try to recreate??