React Native Animated Tabs & Animated Indicator using FlatList
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- 🔥 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
@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.
Such a valuable content,that go through multiple steps, keep doing your awesome work
Not all heroes wear capes.
Thank you Catalin for an awesome tutorial.
Glad it was helpful! Hat down Jamie ✌️
Amazing video, I really enjoy your tutorial. You explain everything very well.
This video has the best intro I've ever seen (*the sideways head tilt part!*) 🎃
hahaha thanks Aman! ✌️🤗
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! :)
Thanks a lot, I’m glad you found it useful ✌️ Thanks Vicent!
My guy, the world needs to know of you. Your content is quality. People are missing out if they don't know this channel
Thank you so much Francis for showing your appreciation, it means a lot to me ✌️
just discovered him but he's dropping some bomb
Brother you are awesome. You explained very well. I love your explain style.
This is incredible and the explanations of the steps is super helpful, great video 🙏
Glad it was helpful! Thank you Cheruiyot! ✌️
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.
Thank you so much Syarif! It means a lot to me ✌️
I really liked your videos. More of these videos. This part of awesome!
Great stuff as always, Catalin!
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.
Thanks a lot, I’m glad you found it useful ✌️ Thanks Facundo ✌️
Really helpful content. I didn't find any good content in TH-cam for react native Animations. This one really is interesting and got lot of information.
Thanks for sharing your feedback Dixit. I’m glad you found my videos useful ✌️
Thank you for sharing such a great tutorial.
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.
Very helpful video! Makes me happy to know such smart people are in the same field as me :)
That was freaking awesome!
Thanks for sharing such a valuable content , we are thankful
So nice of you! Thanks Prakash! ✌️
@@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
Amazing tutorial bruh! you got a new sub!
Thanks for this tutorial ! Nice content
Thank you MAN! That`s amazing
another excellent and insightful video as always!
Thanks a lot Usama! ✌️
Thanks man! Great video
This is very useful for me video, thank you. You're cool.
gracias capo ,saludos desde argentina(el mejor pais del mundo hermano)
You're awesome, I like your content. Keep going!
amazing job man, thanks a lot
perfect bro, please create more video :D
it's difficult for me I really should repeat watching it . thank you for the amazing video !!
you are doing great man! thanks so much, love your contents
Glad you like them! Cheers Riccardo! ✌️
Thanks for making good stuff, learning from your tutorial 👍
Thanks a lot Amit, I’m glad you found it useful ✌️
Sir you are amazing thank you so much
Thanks for sharing!
Amazing man...
You are awesome
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 }],
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 }],
Awesome content!
Awesome job
wonderful. thanks Man also thank you for putting starter code.
You’re welcome! I’m listening to your feedback and this is what came a lot, to add the starter code. Thanks Sina ✌️
Wooww what a creative work bro thank you very very much hero of my life
Thanks a lot Mirza✌️
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.
Thank you so much, Sir!
can you please help me, in this case what exactly "the ref.current"
@@angNguyen-cg8gk same here...
no value "[object Object],[object Object],[object Object],[object Object],[object Object]"
Thank you, a lot...
thanks you so much bro, my problem is same. I fixed it, yeah
what a great tutorial
Can you please do a page curl flip animation like ebooks? Thaanks for the amazing tutorials btw!
Hey man you are amazing! thank's for your awesome videos!
Thank you Kasra, I’m happy that you found them useful. ✌️
Nice content !! Can you make a basic understanding of the react-native reanimated series?
Hi, Thankyou for wonderfull content!
Glad you enjoy it! Thanks Alijan ✌️
Hey this is awesome. i learned so much with you. thank you so much for give me with billions of ideas.
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 ✌️
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!
Awesome tutorial very helpful
Thanks a lot, I’m glad you found it useful ✌️
Thanks a lot 👍👍👍👍👍
Beautiful
Cool..you are awsome dude..
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
"Cảm ơn" - Thank you.
"Rất hữu ích" - Very useful
"Cảm ơn" ✌️
@@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?
Awesome work, Just if i want to change the active tab text color as well how can i do that ?
this is gold
Great video!
How can I change the text color? Did you have any idea about it?
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 ??
very good video!!
Great stuff!
Thanks a lot Andrzej ✌️
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 ?
Awesome content bro
Thank you Gabriel ✌️
Awsome man!
Glad you think so! Thanks Sukhvinder! ✌️
hi thank for the tutorial, is it possible to add lazy load on such tabs ?
Man you are top
can i use scrollview instead of row in tabs
and measure width and x of childs
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
Perfect bro
Thank you Furkan ✌️
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?
awsome... thank you man. I tried it . unfortunately my TabIndicator not rendering on the first time. but if I refresh the screen it appears.
Put containerRef.current in the array at the end of the useEffect
Awesome
Hello ! Amazing vidéo !
I just have one question : You imported "findNodeHandle" but never used it. What is this for ?
man you gem ;heart
Love you
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
Can you done this with react Viewpager? that component only exposes onPageScroll property, instead onScroll, greetings from México.
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?
The only thing governing the dimensions of the component (currently an image) is the outer ...you can put anything inside it
Hi Catalin, grate job, please make tabs scrollable
Great video! Quick question, why not use the new Pressable component?
Great suggestion, I’ll do it in the next videos. Thanks ✌️
Hi! Thank you so much for your videos. I have a question: where did you use 'findNodeHandle'?
I had the same question…😮
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 .
Great suggestion. Thanks Ahmed ✌️
Any performance issue will happen, when I create ref for each array item?
How do I disable the swipe gesture? I want to only scroll on the tab press.
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.
How I can do it with onLayout share with us code source?
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?
Can you please tell me how to make the tabs horizontally scrollable?
What about multi columns/pages by flatlist and dots indicator?
how do you scroll these tabs for active slide if it is more thn 5 ?
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.
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 ?
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. ✌️
where did you use the findNodeHandle?
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
Hi, check my latest video, I'm explaining there how to get the active slide index. Thanks ✌️
👏🏼👏🏼🔥
what font you used in vscode?
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
}
which font are you using
How you got that font in vscode?
can we do it with components instead of flatlist ?
Thanks for sharing this. Can I ask why didn't you use the onLayout prop of a View to calculate the view measurements?
Because I wanted to get the measurements based on the parent container. Thanks ✌️
Catalin Miron onLayout also gives the measurements based on parent view right? Pardon me if I'm wrong.
@@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 ✌️
@@CatalinMironDev Thanks for the explaining. 🙌
Can I scroll horizontal tabs bar?
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?
use measures in your dependancy array in useEffect