React Native Scroll Item animation effect - FlatList and Animated API

[@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

[@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.

[@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

[@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 🇷🇴

[@ariyaman90]

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

[@myrelaxpoint]

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

[@re.liable]

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

[@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

[@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 ✌️

[@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.

[@hansderly]

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

[@nats7367]

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

[@ZiosNeon]

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

[@almobarmij]

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

[@CatalinMironDev]

Much appreciated! Thank you Mohamed! ✌️

[@jeffwebb101]

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

[@BopBeef]

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

[@cfo3049]

Great example, thank´s for your work.

[@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 ✌️

[@coderbites]

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

[@viralchudasama3624]

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

[@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

[@arnabganguly6220]

Your animation tutorials really helped me a lot. 💕

Really nice job

[@Sami-mm]

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

[@kikebecerra]

Mindblowner tutorial 👏👏👏

[@charithagoonewardena3095]

Waiting for the next one. Addicted!

[@umerfarooq8618]

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

[@isaaccastillo8628]

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

[@CatalinMironDev]

Thank you so much!

[@charithagoonewardena3095]

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

[@CatalinMironDev]

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

[@korpemre]

Why I find every video of yours great 👏👏

[@CatalinMironDev]

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

[@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 ✌️

[@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.

[@007gambo]

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

[@anastely6144]

As always 🔥, Thanks Catalin 🤞

[@CatalinMironDev]

Thanks a lot Anas ✌️

[@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 ✌️

[@rvdev3800]

Very good explanation, thank you!

[@cristiancamilosanchezardil9730]

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

[@principe.borodin]

Fantastic, Awesome.

[@CatalinMironDev]

Great! Thanks Igor ✌️

[@alaspuresujay]

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

[@lokeshchauhan6253]

Great tutorial man

[@farhatulsk]

Great work😃👍

[@jalalhasanov9958]

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

[@arunprasath8649]

u r a lifesaver bro.

[@alyankhan806]

Amazing! learned so much

[@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

[@zainkhalid8038]

Awesome Tutorial

[@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 ✌️

[@navodadesilva99]

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

[@charbelmansour8925]

Notifications on ! :D

[@136machiner]

Thanks for tutorial!

[@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!

[@wubshetdemissie2933]

Nice job man.

[@redouaneserir1293]

very well explained ,very helpful thanks

[@irfanbaloch7174]

As always high quality content

[@CatalinMironDev]

Thank you so much Irfan ✌️

[@hamidkhan-ed8ze]

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

[@andresribeiroo]

Awesome 💥 A suggestion for a video: animated login page

[@CatalinMironDev]

I’m working on it Andre ✌️

[@sykn3z]

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

[@CatalinMironDev]

Wow, thanks a ton ✌️

[@chamaldezilva]

awesome explaining! just hit the red button

[@harshdeepsaiyam570]

That was awesome!

[@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

[@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.

[@MangoFlamingo]

Well done. this channel should have more views than this

[@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.

[@k.a6]

Wow, this is Awesome

[@chandranathgupta4500]

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

[@prakashmardi25]

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

[@code_lift]

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

[@skarfacePT]

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

[@MrAVQ]

awesome videos, might can you show us how create a swipe button left to right with Beautifull animation

[@prathameshsagvekar6696]

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

[@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?

[@maxaquilino7264]

Another excellent video, you make it look so simple. In my case, I'm using a FlatList with a dynamic "numColumns" parameter based on the screen size, where I set 1 column for mobile devices and 2 columns for tablets. Your solution works well on mobiles but only works on the first item for tablets. I tried to use different inputRange values when I have 2 columns by doubling the itemHeight but still it doesn't make any difference. Is there any solution for this?

[@DmitriiDeriabin]

same question?

[@ddikodroid]

Keep it up bro🚀

[@CatalinMironDev]

Thanks ✌️

[@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 ⌨️

[@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.

[@ThinhTran-yu9sn]

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

[@sheheryarqazi1006]

thank you very much master react Native

[@mihaivancsa7815]

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

[@junangameplays3271]

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

[@enes_town]

You so helped me. You are awesome ❤️

[@CatalinMironDev]

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

[@fouadmagdy3301]

Transform not working friend what ahould i do

[@hrishikeshkedar2574]

Great Stuff!!

[@alexpoon5921]

how about the height of list items are dynamic which all the items have difference height?

[@mobileappsdevware264]

amazing ideas, thanks

[@CatalinMironDev]

I’m glad you liked it Akram ✌️

[@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

[@krishnavishwakarma908]

Thanks a lot..... 🔥 🔥 🔥

[@muhammadalihassan2157]

Great brother. My suggestion please add a tutorial scroll to particular item in flat list without giving height to the object. Please

[@CatalinMironDev]

This is a great suggestion and I’m looking into it. Stay tuned for it. Thanks Muhammad ✌️

[@johnbenfer3723]

​@@CatalinMironDev I am also interested in this.

[@tabaicanking3701]

You the best bro thanks

[@CatalinMironDev]

Thanks a lot John ✌️

[@ehtishamtahir2187]

What theme are you using? And font styles?

[@jairosoares6877]

Great video! thanks

[@CatalinMironDev]

Glad you liked it! Thanks Jairo ✌️

[@ahmedam77]

I love it!

[@vishwasagrawal4700]

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

[@waqasehmed]

hey which font family are you using in VS code? it's quite good

[@sangsokea]

Keep going, keep getting more sub...

[@ThomazMartinez]

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

[@aUbilla]

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

[@muratakbaba8959]

you are awesome man. unfortunately this app doesn't work on web but when i run it on my mobile phone it was working fine.if you have a suggestion for using on web please answer this comment

[@shiekhpalace2401]

Please tell which font are you using for vs code

[@ddikodroid]

Great video!

[@CatalinMironDev]

Thanks a lot Diko ✌️