React Native Animated Tabs & Animated Indicator using FlatList

[@thebenkalungi]

I went through countless tutorials on implementing this feature but none worked. This video has saved me the struggle and hustle. Thanks so much bro.

[@techienomadiso8970]

My guy, the world needs to know of you. Your content is quality. People are missing out if they don't know this channel

[@CatalinMironDev]

Thank you so much Francis for showing your appreciation, it means a lot to me ✌️

[@optimusdebugger9638]

just discovered him but he's dropping some bomb

[@mpeguese210]

@Catalin This tutorial helped me complete revamp a project I was working on. Thanks for much man for all the Support you give the RN Community.

[@jamieblair4336]

Not all heroes wear capes. Thank you Catalin for an awesome tutorial.

[@CatalinMironDev]

Glad it was helpful! Hat down Jamie ✌️

[@philipprajahmourasrivastav2398]

Amazing video, thank you so much for shedding light on how some basic animations work. One thing that I however ran into was the the indicator wouldn't show up until it did a hot reload. Whenever I would run the app from scratch the indicator wouldn't be there. I found this to be because ref.current.measureLayout was initially returning 0 for all of the values. I'm not sure why but if anyone else runs into this my solution was to put the ref.current in the array at the end of the useEffect. This essentially makes sure that useEffect runs again whenever ref.current changes (like a component will update). Hope this helps someone. Thanks again! Also video suggestion from me would be a collapsible view that collapses when you begin scrolling a list below it.

[@DaveBatistaa]

Thank you so much, Sir!

[@angNguyen-cg8gk]

can you please help me, in this case what exactly "the ref.current"

[@shafqatullah6666]

@@angNguyen-cg8gk same here... no value "[object Object],[object Object],[object Object],[object Object],[object Object]"

[@cuongnguyen1230]

Thank you, a lot...

[@BDCCNVUONGANKHANG]

thanks you so much bro, my problem is same. I fixed it, yeah

[@prakashd842]

Thanks for sharing such a valuable content , we are thankful

[@CatalinMironDev]

So nice of you! Thanks Prakash! ✌️

[@faizanansari975]

@@CatalinMironDev i have a share a small video on ur Twitter handle please check the dm n plz make a video by achieving that in react native flatlist

[@amanmittal416]

This video has the best intro I've ever seen (*the sideways head tilt part!*) 🎃

[@CatalinMironDev]

hahaha thanks Aman! ✌️🤗

[@GuperGER]

Wow! This is looking awesome! I'm currently working in Xamarin Forms but after watching some of your videos I can definately see me trying out React Native :) Keep it up! :)

[@CatalinMironDev]

Thanks a lot, I’m glad you found it useful ✌️ Thanks Vicent!

[@npc73x]

Such a valuable content,that go through multiple steps, keep doing your awesome work

[@pradeepthite2894]

Brother you are awesome. You explained very well. I love your explain style.

[@shareef2178]

I rarely subscribe to channels but this channel is worth to subscribe to, thanks a lot for your hard work, keep it up, I love your content.

[@CatalinMironDev]

Thank you so much Syarif! It means a lot to me ✌️

[@facundofernandez1144]

Your videos are excellent, thank you very much for sharing this content. I am always waiting for the next one to learn more. Greetings from Argentina.

[@CatalinMironDev]

Thanks a lot, I’m glad you found it useful ✌️ Thanks Facundo ✌️

[@haightgao2389]

Thank you for sharing such a great tutorial.

[@619dixitrock]

Really helpful content. I didn't find any good content in KZbin for react native Animations. This one really is interesting and got lot of information.

[@CatalinMironDev]

Thanks for sharing your feedback Dixit. I’m glad you found my videos useful ✌️

[@modo_demoledor]

gracias capo ,saludos desde argentina(el mejor pais del mundo hermano)

[@hwj8640]

Amazing video, I really enjoy your tutorial. You explain everything very well.

[@anshul9856]

Very helpful video! Makes me happy to know such smart people are in the same field as me :)

[@aftabamin8508]

thanks, dude. you have made my life easier with these great tutorials. love from Pakistan. if I get a chance I will meet you in my life.

[@Pupu._]

it's difficult for me I really should repeat watching it . thank you for the amazing video !!

[@yakupdurmus3008]

Thanks for this tutorial ! Nice content

[@collocheru]

This is incredible and the explanations of the steps is super helpful, great video 🙏

[@CatalinMironDev]

Glad it was helpful! Thank you Cheruiyot! ✌️

[@minotuki100]

Hey Catalin. Thanks for this tuto! Your method with forwardRef is so useful and I feel better to use functionals components with Animated than the class components. I added myself the challenge to have useNativeDriver:true. For that, I use scaleX instead of width. I share here the new scrollX interpolations : const scaleX = scrollX.interpolate({ inputRange, outputRange: measures.map((item, i) => i > 0 ? item.width / measures[0].width : 1 ), }); const translateX = scrollX.interpolate({ inputRange, outputRange: measures.map( (item, i) => item.x + item.width / 2 - measures[0].width / 2 ), }); And new styles for the Animated.View are : width: measures[0].width, transform: [{ translateX }, { scaleX }],

[@sunnymittal1906]

A slightly simpler way to do this might be as follows: const indicatorWidth = scrollX.interpolate({ inputRange, outputRange: measures.map((measure) => measure.width), }); // Same as video const translateX = scrollX.interpolate({ inputRange, outputRange: measures.map((measure) => measure.x + measure.width / 2), }); // mostly the same but adding measure.width / 2 to compensate for how scaling works Then the changed indicator style would just be: width: 1, transform: [{ translateX }, { scaleX }],

[@erlanakylbekovich4586]

I really liked your videos. More of these videos. This part of awesome!

[@wom987]

Amazing tutorial bruh! you got a new sub!

[@cli23]

Great stuff as always, Catalin!

[@usamaali736]

another excellent and insightful video as always!

[@CatalinMironDev]

Thanks a lot Usama! ✌️

[@radomirmijovic2605]

Thanks man! Great video

[@re.liable]

That was freaking awesome!

[@tinpham1052]

perfect bro, please create more video :D

[@HOWGLAI]

Thank you MAN! That`s amazing

[@TaiBradCDinh]

amazing job man, thanks a lot

[@capy7773]

You're awesome, I like your content. Keep going!

[@luispaulo5714]

Hey this is awesome. i learned so much with you. thank you so much for give me with billions of ideas.

[@CatalinMironDev]

You’re more than welcome and I’m happy that you found the videos inspiring. Sharw what you’re building with us, you can join the discord, there’s a dedicated channel for sharing code there. Thanks Luis ✌️

[@luispaulo5714]

Yeah! i want to code some UI clone using your content about shared element and animations. How can i find you on linkedin to quote you there about teachings? Thanks man!

[@riccardomirarchi4136]

you are doing great man! thanks so much, love your contents

[@CatalinMironDev]

Glad you like them! Cheers Riccardo! ✌️

[@BrkCnAka]

It looks so good. What do we need to do to be scrollable when the data length is 10? Thanks.

[@CatalinMironDev]

@@BrkCnAka that’s a great question and suggestion on the same time. I’m going to tackle this problem in a future video, where the tabs are inside a scrollable view. Thanks ✌️

[@BrkCnAka]

@@CatalinMironDev Thank you for coming back. I'm looking forward to it.

[@adarshjaiswal7334]

@@CatalinMironDev Yeah, that's a genuine point.

[@adarshjaiswal7334]

@@CatalinMironDev Eagerly waiting for this.

[@nguyennam6774]

Thanks alot for your sharing. I follow your guides up to push(x,y,width,height) after measureLayout to above array then i got empty. I cannot put to that array so cannot setstate

[@mirzairshad4063]

Wooww what a creative work bro thank you very very much hero of my life

[@CatalinMironDev]

Thanks a lot Mirza✌️

[@duxuan4957]

"Cảm ơn" - Thank you. "Rất hữu ích" - Very useful

[@CatalinMironDev]

"Cảm ơn" ✌️

[@duxuan4957]

@@CatalinMironDev I think I and many RNers are looking forward to Ripple Effect of Material Design Buttons for both ios and android. Was it too difficult for you?

[@ehtishamtahir2187]

Amazing man... You are awesome

[@thenoob8682]

awsome... thank you man. I tried it . unfortunately my TabIndicator not rendering on the first time. but if I refresh the screen it appears.

[@nathan8541]

Put containerRef.current in the array at the end of the useEffect

[@n_singi]

Hey Amazing tutorial man I'm on a project in which I'm using hashmap instead of array of images So, Will hashmap work in place of arrayin Flatlist section ?? plus what is the font u r using in VSCode ??

[@darianaorlova2405]

This is very useful for me video, thank you. You're cool.

[@vvssangeeth]

Can you create uber eats list view animation after this ? This is an excellent tutorial. Thanks for that. Uber eats is also built in RN.

[@CatalinMironDev]

Could you please record the screen and share the video with me? Great suggestion! Thanks Sangeeth ✌️

[@vvssangeeth]

@@CatalinMironDev drive.google.com/file/d/1h_m4OC107X7xuvrLRK19W46bJqEFfSQr/view?usp=drivesdk Please find the video in above drive link. Let me know if you need anything else. Thanks for the quick response. Highly appreciated.

[@smilecat9623]

@@CatalinMironDev please can we do this animation with three different components. Thanks

[@sinaebr7337]

wonderful. thanks Man also thank you for putting starter code.

[@CatalinMironDev]

You’re welcome! I’m listening to your feedback and this is what came a lot, to add the starter code. Thanks Sina ✌️

[@Amitk7950]

Thanks for making good stuff, learning from your tutorial 👍

[@CatalinMironDev]

Thanks a lot Amit, I’m glad you found it useful ✌️

[@ludwigvillalba1886]

Thanks for sharing!

[@thenriquedb]

Awesome content!

[@andreaintech4305]

Hi! Thank you so much for your videos. I have a question: where did you use 'findNodeHandle'?

[@call_me_rusker]

I had the same question…😮

[@Sara-po1jd]

in your indictator you are doing this const indicatorWidth = scrollX?.interpolate({ inputRange, outputRange: measures.map((measure) => measure.width), }); const translateX = scrollX?.interpolate({ inputRange, outputRange: measures.map((measure) => measure.left), }); What I would l. iketo do is to use the useAnimatedStyle instead , Iam using teh Animated imported from react-native-reanimated.. any suggestion?

[@romankoncek150]

Good job, few things I'd do differently. 1. Using onLayout prop for measurements instead all of these refs would make it more simple 2. You could use scaleX transformation instead of width so you can use native driver to have better performance 3. It is not possible to set the animation duration when pressing tabs, because scrollToOffset method does not support it. I guess the only way to solve this is to basically implement the scroling by yourself which is a lot of effort.

[@amisckass9550]

How I can do it with onLayout share with us code source?

[@kasraafshari4293]

Hey man you are amazing! thank's for your awesome videos!

[@CatalinMironDev]

Thank you Kasra, I’m happy that you found them useful. ✌️

[@cuongnguyen1230]

Great video! How can I change the text color? Did you have any idea about it?

[@deepakchoudhary3066]

Awesome work, Just if i want to change the active tab text color as well how can i do that ?

[@dev_ship_daily]

Awesome tutorial very helpful

[@CatalinMironDev]

Thanks a lot, I’m glad you found it useful ✌️

[@mausambhalekar1378]

Sir you are amazing thank you so much

[@annhienofficial8000]

what a great tutorial

[@kylebelle246]

Where was findNodeHandle used???

[@ed3osp]

Awesome job

[@Have_a_moment]

Cool..you are awsome dude..

[@rosoonbphingkhue205]

Thanks a lot 👍👍👍👍👍

[@koushiksaha3511]

Hi @Catalin, thank you for your tutorial .. I'm facing a problem like at first rendering indicator is not showing .. can you please resolve this issue?

[@adilmezghouti]

Great work

[@CatalinMironDev]

Thank you! Cheers!

[@skippybassmaster7268]

As usual love your content. I'm looking for a way to do exactly this, but where the tabs are scrollable. I'm having hard time to find the active index tab position to scroll my indicator to the right spot. Any idea ?

[@PrakashChAwal]

Nice content !! Can you make a basic understanding of the react-native reanimated series?

[@pascalkollie4216]

If you want to change the color of the tab with a swipe you can do this const Indicator = ({ measures, scrollX, dataValues }) => { const inputRange = dataValues.map((_, i) => i * width) const IndicatorWidth = scrollX.interpolate({ inputRange, outputRange: measures.map((measure) => measure._width) }) const translateX = scrollX.interpolate({ inputRange, outputRange: measures.map((measure) => measure.x) }) const colors = scrollX.interpolate({ inputRange, outputRange: ["gray", "red", "blue"] }) return }

[@zouletterider4797]

hi thank for the tutorial, is it possible to add lazy load on such tabs ?

[@williammendonca9975]

Okay, I'm Brazilian and I follow your content. Congratulations on the work. One question. Will I have access to GitHub codes on any Patreon plan?

[@CatalinMironDev]

Hi William, yes, Patreons will have access to GitHub source codes (for this tutorial but for many others). I’ve already posted there the code for another 3 upcoming tutorials. Thanks once again ✌️

[@williammendonca9975]

@@CatalinMironDev I'm already a Patreon. I just signed up and made PayPal payment. Let's code.

[@CatalinMironDev]

@@williammendonca9975 thanks a lot and welcome to the club! ✌️

[@fixocsolutions2695]

can i use scrollview instead of row in tabs and measure width and x of childs

[@Alijanadeli]

Hi, Thankyou for wonderfull content!

[@CatalinMironDev]

Glad you enjoy it! Thanks Alijan ✌️

[@sarahali-wn5sd]

Can you please do a page curl flip animation like ebooks? Thaanks for the amazing tutorials btw!

[@halfshieldstudio7027]

19:10 Style property 'width' is not supported by native animated module

[@gabrr]

Awesome content bro

[@CatalinMironDev]

Thank you Gabriel ✌️

[@ChandanKumar-uo3kf]

Wow, your content is amazing . I have learnt so much from you. I got an error in this code can you please help me. ERROR: TypeError:null is not an object (evaluating 'item.ref.current.measureLayout')

[@DucNguyen-kp6ul]

I have the same problem. How did you fix it?

[@Netvirux]

Thank You sir! But why don't you use tab view instead?

[@CatalinMironDev]

There are many available packages, I just wanted to showcase a particular React Native feature that you can use

[@marchabib8168]

Hello ! Amazing vidéo ! I just have one question : You imported "findNodeHandle" but never used it. What is this for ?

[@hosamashraf8083]

Thanks for sharing this. Can I ask why didn't you use the onLayout prop of a View to calculate the view measurements?

[@CatalinMironDev]

Because I wanted to get the measurements based on the parent container. Thanks ✌️

[@hosamashraf8083]

Catalin Miron onLayout also gives the measurements based on parent view right? Pardon me if I'm wrong.

[@CatalinMironDev]

@@hosamashraf8083 you are right measureLayout and onLayout give you back the same thing, but onLayout it’s a method that exists in the children and I wanted to have access to children from the parent via ref. Ref is more powerful for this example. Thanks ✌️

[@hosamashraf8083]

@@CatalinMironDev Thanks for the explaining. 🙌

[@aqdasilyas2768]

Amazing video brother ... One thing I want to ask that how can I change different components instead of different images on background ... In this video, when i click specific text it appears image related to that text.... But now I want that when i click on specific text... it shows a component instead of image ... how can i doo that ? please answer me as soon as possible because it helps me in my project

[@filouledoux]

Great video! Quick question, why not use the new Pressable component?

[@CatalinMironDev]

Great suggestion, I’ll do it in the next videos. Thanks ✌️

[@johnny719top]

very good video!!

[@__edward]

How do I disable the swipe gesture? I want to only scroll on the tab press.

[@erkangorgulu6013]

Thank you very much for the video. I used scrollview for tabs and made it work. However I am trying make the tab scrollview to scroll when I change the screen. Creating a ref for tab scrollview is the way to go or you would have a different approch in mind ? Thanks in advance.

[@CatalinMironDev]

Creating a ref for tab scrollview and using `scrollToOffset` should do the trick. Thanks Erkan! ✌️

[@adarshjaiswal7334]

was you able to make it work completely making tab scrollable. Would you mind sharing code here.

[@codewithponleu]

@@CatalinMironDev I followed your recommendation, but the indicator doesn’t play nicely with scroll view.

[@andrzejhanusek7749]

Great stuff!

[@CatalinMironDev]

Thanks a lot Andrzej ✌️

[@razafaltu8855]

If i have more than 5 options .... it is only 5 options that fit in the screen ... but when i add 10 options in tab ... it does not look great... so how i add more options in tabview

[@akashraj4901]

Can you please tell me how to make the tabs horizontally scrollable?

[@sukhvsin2]

Awsome man!

[@CatalinMironDev]

Glad you think so! Thanks Sukhvinder! ✌️

[@Jitsandcrypto]

Beautiful

[@isidorsajinovic5573]

Hey man! Excellent job! I have one bug here. My measurement is done before render and when I start my app indicator never shows up because measurements are always zero (x, y, width and height are zero). When I remove [ ] in useEffect hook it works but it isn't smooth. Do you have any idea how to solve that?

[@soumyaranjansahu4519]

use measures in your dependancy array in useEffect

[@samidebayroune3478]

can we do it with components instead of flatlist ?

[@4hiphop1]

Man you are top

[@animeshsrivastava1159]

Hi, really like your videos. Is it possible to have a dynamic react component for each tab in place of the image? Meaning different ( varying in tags ) structure for each of the tabs rather than having an image?

[@sunnymittal1906]

The only thing governing the dimensions of the component (currently an image) is the outer ...you can put anything inside it

[@mehdiamiri5418]

hey Catalin thank you for your great video but i have a problem.indicator behaves so bad when tab items increases. you used .map for rendering tab titles but i changed it to flatlist because i have 8 tab titles. after that when i swipe to other tab , indicator position completely treats wrong

[@newtonsazzad748]

where did you use the findNodeHandle?

[@tahashaikh1733]

how do you scroll these tabs for active slide if it is more thn 5 ?

[@Eddysapata]

I asked it already but have not replied, which color scheme and theme you are using it looks lovely. ❤❤. I know font is operator

[@CatalinMironDev]

Hi Eddy, the VSCode theme is called Palenight and font yes its Operator Mono

[@Eddysapata]

@@CatalinMironDev oh thanks that was quick.. ❤. Love from India.. ❤

[@vigneshwaraneswaramoorthi4117]

Any performance issue will happen, when I create ref for each array item?

[@BehindTheIssues]

Hi Catalin, grate job, please make tabs scrollable

[@carlosandresafanadorcabal2801]

this is gold

[@priyashah1693]

Hey , Firstly u r videos are awesome. Currently I was doing this example but I was not load array 'M' and useEffect is also not getting called.I'm talking about 15:15 Tabs useEffect. If you can help, that will be great.

[@shafqatullah6666]

same here.. cant u help me if u found any solution?

[@sidilain5533]

Can you done this with react Viewpager? that component only exposes onPageScroll property, instead onScroll, greetings from México.

[@feritejakusuma8450]

Thanks for the amazing tutorial. i'm new in .JS and i learned a lot from your video, and i wanna ask, at 21:12 . what is ( ref?.current?.scrollToOffset({....}) ) mean ? , why there is question mark there ?

[@CatalinMironDev]

Hi Feri, great question and sorry for missing this out in my explanation. The question mark it’s called optional chaining (developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining) and is checking if the left hand side exists otherwise returns undefined. Eg: if(obj && obj.key && obj.key.subKey) Can be translated to obj?.key?.subKey Thanks and I hope that this was helpful. ✌️