React Native Animated Tabs & Animated Indicator using FlatList

🔥 Create a React Native Animated Tabs indicator / Dynamic Tabs indicator that will dynamically change its width and position based on React Native FlatList scrollX.
In this video tutorial we'll learn how to create:
- learn how to create an animated tabs using React Native FlatList
- learn how to animate a tabs indicator
- learn how to create an animated tabs indicator using Animated API
- learn how to measureLayout and use React Native findNodeHandle
Built using @expo, vanilla React Native Animated API and FlatList.
This code works in plain React Native project as well since we are using only React Native APIs such as Animated and FlatList in order to create a React Native Animated Tabs and Animated tabs indicator that will scale and position according to the active slide from the FlatList.
----
⚠️ Access full source code: www.patreon.com/bePatron?u=20...
----
Starter code: gist.github.com/catalinmiron/...
👉👉 Have any questions? Join Discord: / discord .
Want to support me?
- Patreon: / catalinmiron
- BuyMeACoffee: www.buymeacoffee.com/catalinm...
- Paypal: paypal.me/catalinmiron
----
You can find me on:
- Github: github.com/catalinmiron
- Twitter: / mironcatalin
- Website: batman.codes
Timeline:
00:00 Introduction + What we’re going to build
00:56 Boilerplate + starter code link
02:19 Create the Animated FlatList
05:15 Create Animated.Value ref for FlatList
06:20 Create Tabs component
07:10 Create Tab component
09:30 Create Tabs Indicator component
10:30 Get the Tabs measurements using measureLayout and findNodeHandle
12:40 How React Native ref measureLayout works
16:50 Animated Indicator width and x based on FlatList scrollX position
20:10 Last part, press on tab to modify FlatList scrollOffset
23:14 Final words and thanks
#react-native-tabs #react-native-flatlist #react-native-tabs-animation #react-native-dynamic-underline-animation #react-native-animated-tabs-indicator

[@npc73x]

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

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

[@hwj8640]

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

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

[@jamieblair4336]

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

[@CatalinMironDev]

Glad it was helpful! Hat down Jamie ✌️

[@collocheru]

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

[@CatalinMironDev]

Glad it was helpful! Thank you Cheruiyot! ✌️

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

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

[@anshul9856]

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

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

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

[@erlanakylbekovich4586]

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

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

[@cli23]

Great stuff as always, Catalin!

[@wom987]

Amazing tutorial bruh! you got a new sub!

[@yakupdurmus3008]

Thanks for this tutorial ! Nice content

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

[@HOWGLAI]

Thank you MAN! That`s amazing

[@darianaorlova2405]

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

[@usamaali736]

another excellent and insightful video as always!

[@CatalinMironDev]

Thanks a lot Usama! ✌️

[@radomirmijovic2605]

Thanks man! Great video

[@re.liable]

That was freaking awesome!

[@capy7773]

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

[@riccardomirarchi4136]

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

[@CatalinMironDev]

Glad you like them! Cheers Riccardo! ✌️

[@Amitk7950]

Thanks for making good stuff, learning from your tutorial 👍

[@CatalinMironDev]

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

[@TaiBradCDinh]

amazing job man, thanks a lot

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

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

[@ludwigvillalba1886]

Thanks for sharing!

[@thesage86]

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

[@tinpham1052]

perfect bro, please create more video :D

[@Pupu._]

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

[@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 }],

[@PrakashChAwal]

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

[@mirzairshad4063]

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

[@CatalinMironDev]

Thanks a lot Mirza✌️

[@kasraafshari4293]

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

[@CatalinMironDev]

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

[@deepakchoudhary3066]

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

[@ehtishamtahir2187]

Amazing man... You are awesome

[@sarahali-wn5sd]

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

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

[@thenriquedb]

Awesome content!

[@mausambhalekar1378]

Sir you are amazing thank you so much

[@cuongnguyen1230]

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

[@DeCodewithMinte]

Awesome tutorial very helpful

[@CatalinMironDev]

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

[@Alijanadeli]

Hi, Thankyou for wonderfull content!

[@CatalinMironDev]

Glad you enjoy it! Thanks Alijan ✌️

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

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

[@ed3osp]

Awesome job

[@zouletterider4797]

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

[@fixocsolutions2695]

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

[@annhienofficial8000]

what a great tutorial

[@marchabib8168]

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

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

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

[@vigneshwaraneswaramoorthi4117]

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

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

[@filouledoux]

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

[@CatalinMironDev]

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

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

[@rosoonbphingkhue205]

Thanks a lot 👍👍👍👍👍

[@johnny719top]

very good video!!

[@mytube5182]

Cool..you are awsome dude..

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

[@gabrr]

Awesome content bro

[@CatalinMironDev]

Thank you Gabriel ✌️

[@__edward]

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

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

[@sidilain5533]

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

[@newtonsazzad748]

where did you use the findNodeHandle?

[@4hiphop1]

Man you are top

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

[@andrzejhanusek7749]

Great stuff!

[@CatalinMironDev]

Thanks a lot Andrzej ✌️

[@Jitsandcrypto]

Beautiful

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

[@tahashaikh1733]

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

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

[@sukhvindersingh6185]

Awsome man!

[@CatalinMironDev]

Glad you think so! Thanks Sukhvinder! ✌️

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

[@akashraj4901]

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

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

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

[@chhornponleu8191]

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

[@NonSense1311]

What about multi columns/pages by flatlist and dots indicator?

[@samidebayroune3478]

can we do it with components instead of flatlist ?

[@plataformameugym]

what font you used in vscode?

[@amilalisahil6882]

which font are you using

[@carlosandresafanadorcabal2801]

this is gold

[@narencool236]

How you got that font in vscode?

[@BehindTheIssues]

Hi Catalin, grate job, please make tabs scrollable

[@attran7775]

Can I scroll horizontal tabs bar?

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

[@oriarazi]

Thanks! How can I actually know which one is shown ? I want to make the current shown tab’s header bold and the rest normal

[@CatalinMironDev]

Hi, check my latest video, I'm explaining there how to get the active slide index. Thanks ✌️

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

[@securityguy8353]

Is that possible to add pages instead of images

[@AhmedAb96]

Thank you so much. If u can make a video about how to make coustom tabBar animated with react-navigation 5 please. I wish u the the best .

[@CatalinMironDev]

Great suggestion. Thanks Ahmed ✌️

[@MrZlep]

Thank you very much. This is awesome. However, I'm really struggling to understand inputRange and outputRange. Could you please do a tutorial on these two things or maybe explain it a little bit more in your next video? And then there is one more thing I don't understand. What does "ref?.current?." at 21:05 mean? Especially the question mark? Thank you very much in advance.

[@CatalinMironDev]

Hi MrZlep, great topic suggestion, I’ll think about creating a video explaining interpolation input and output ranges. About 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 ✌️

[@MrZlep]

@@CatalinMironDev Thank you very much. You're awesome. Love your RN tutorials. Keep going, you will add a lot of followers in the future.

[@angNguyen-cg8gk]

is there any npm package like this ?

[@jonathanmachado4008]

Hi, Catalin thanks for the video. 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). Do you have any idea how to solve that?

[@NgocNguyen-re3gm]

same here -_- he didn't reload the entire app

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

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

[@iblisalaleab4241]

Hi, really like your videos. This is awesome. However, I'm really struggling with this error TypeError: _ref$current.scrollToOffset is not a function. (In' _ref$current.scrollToOffset({ offset: itemIndex * width, })','_ref$current.scrollToOffset' is undefined ). Thank you very much in advance.