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.
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 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
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?
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 ??
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 }],
@@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 ✌️
Really helpful content. I didn't find any good content in RUclips for react native Animations. This one really is interesting and got lot of information.
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?
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 ?
@@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 ✌️
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?
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
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')
@@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?
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.
for width:0 heigth:0... issue on first render i have added below condition in useEffect [measures[0]?.height==0] After that working as expected Thank You.
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?
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 ✌️
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. ✌️
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!
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?
@@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.
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.
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
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.
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
@@CatalinMironDev for example, I would like to add 8 tabs in scrollview so that I can swipe it. Currently, the text fontsize will be small if we have many tabs. If you could do that, it would be great. Really love your video, amazing.
I'm using React Native since it was in private mode for almost 6 years now and I've been playing with it since then. Practice, fail, fail, practice and repeat is my advice. Start small and incrementally add complexity into your projects. Cheers ✌️
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.
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 ✌️
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
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
@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.
Not all heroes wear capes.
Thank you Catalin for an awesome tutorial.
Glad it was helpful! Hat down Jamie ✌️
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
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!
Brother you are awesome. You explained very well. I love your explain style.
Hi! Thank you so much for your videos. I have a question: where did you use 'findNodeHandle'?
I had the same question…😮
Such a valuable content,that go through multiple steps, keep doing your awesome work
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
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?
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 ??
gracias capo ,saludos desde argentina(el mejor pais del mundo hermano)
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 ✌️
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 }],
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 ✌️
Hello ! Amazing vidéo !
I just have one question : You imported "findNodeHandle" but never used it. What is this for ?
It looks so good. What do we need to do to be scrollable when the data length is 10? Thanks.
@@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 ✌️
@@CatalinMironDev Thank you for coming back. I'm looking forward to it.
@@CatalinMironDev Yeah, that's a genuine point.
@@CatalinMironDev Eagerly waiting for this.
Really helpful content. I didn't find any good content in RUclips 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 ✌️
Great video!
How can I change the text color? Did you have any idea about it?
Amazing video, I really enjoy your tutorial. You explain everything very well.
This is incredible and the explanations of the steps is super helpful, great video 🙏
Glad it was helpful! Thank you Cheruiyot! ✌️
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.
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?
it's difficult for me I really should repeat watching it . thank you for the amazing video !!
Thank you for sharing such a great tutorial.
Awesome work, Just if i want to change the active tab text color as well how can i do that ?
can i use scrollview instead of row in tabs
and measure width and x of childs
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 ?
Very helpful video! Makes me happy to know such smart people are in the same field as me :)
Great video! Quick question, why not use the new Pressable component?
Great suggestion, I’ll do it in the next videos. Thanks ✌️
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. 🙌
hi thank for the tutorial, is it possible to add lazy load on such tabs ?
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
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
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')
I have the same problem. How did you fix it?
perfect bro, please create more video :D
can we do it with components instead of flatlist ?
"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?
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.
Creating a ref for tab scrollview and using `scrollToOffset` should do the trick. Thanks Erkan! ✌️
was you able to make it work completely making tab scrollable. Would you mind sharing code here.
@@CatalinMironDev I followed your recommendation, but the indicator doesn’t play nicely with scroll view.
where did you use the findNodeHandle?
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
I really liked your videos. More of these videos. This part of awesome!
Where was findNodeHandle used???
Thank You sir!
But why don't you use tab view instead?
There are many available packages, I just wanted to showcase a particular React Native feature that you can use
Thanks for this tutorial ! Nice content
Any performance issue will happen, when I create ref for each array item?
for width:0 heigth:0... issue on first render
i have added below condition in useEffect
[measures[0]?.height==0]
After that working as expected Thank You.
Great stuff as always, Catalin!
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
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?
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 ✌️
@@CatalinMironDev
I'm already a Patreon. I just signed up and made PayPal payment. Let's code.
@@williammendonca9975 thanks a lot and welcome to the club! ✌️
another excellent and insightful video as always!
Thanks a lot Usama! ✌️
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. ✌️
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!
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?
same here -_- he didn't reload the entire app
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.
Could you please record the screen and share the video with me? Great suggestion! Thanks Sangeeth ✌️
@@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.
@@CatalinMironDev please can we do this animation with three different components. Thanks
which font are you using
That was freaking awesome!
Amazing tutorial bruh! you got a new sub!
Wooww what a creative work bro thank you very very much hero of my life
Thanks a lot Mirza✌️
How do I disable the swipe gesture? I want to only scroll on the tab press.
Thank you MAN! That`s amazing
Is that possible to add pages instead of images
Can I scroll horizontal tabs bar?
What about multi columns/pages by flatlist and dots indicator?
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.
same here.. cant u help me if u found any solution?
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
}
Thanks man! Great video
How you got that font in vscode?
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
Thanks for making good stuff, learning from your tutorial 👍
Thanks a lot Amit, I’m glad you found it useful ✌️
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?
what font you used in vscode?
Can you please tell me how to make the tabs horizontally scrollable?
This is very useful for me video, thank you. You're cool.
how do you scroll these tabs for active slide if it is more thn 5 ?
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
you are doing great man! thanks so much, love your contents
Glad you like them! Cheers Riccardo! ✌️
is there any npm package like this ?
Why is this indicator not working while I'm creating same structure using "react-native-reanimated"
Nice content !! Can you make a basic understanding of the react-native reanimated series?
amazing job man, thanks a lot
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 ✌️
Can you done this with react Viewpager? that component only exposes onPageScroll property, instead onScroll, greetings from México.
You're awesome, I like your content. Keep going!
which font is that ?
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 ✌️
Thanks for sharing!
how about mutiple tabs in scrollview?
The question is too vague. Please share more details about the thing that you'd like to achieve. Thanks!
@@CatalinMironDev for example, I would like to add 8 tabs in scrollview so that I can swipe it. Currently, the text fontsize will be small if we have many tabs. If you could do that, it would be great. Really love your video, amazing.
Hi Catalin, how did you get so good at react native, can you share were you learnt?
I'm using React Native since it was in private mode for almost 6 years now and I've been playing with it since then. Practice, fail, fail, practice and repeat is my advice. Start small and incrementally add complexity into your projects. Cheers ✌️
@@CatalinMironDev Ok then thankyou
my measureLayout() method always fail. any solution for it .
Can you please do a page curl flip animation like ebooks? Thaanks for the amazing tutorials btw!
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.
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 ✌️
@@CatalinMironDev Thank you very much. You're awesome. Love your RN tutorials. Keep going, you will add a lot of followers in the future.
can we make the same but with video ?
Do you have an example of how this may look like? add it here: www.animatereactnative.com/inspiration
Awesome content!
I asked it already but have not replied, which color scheme and theme you are using it looks lovely. ❤❤. I know font is operator
Hi Eddy, the VSCode theme is called Palenight and font yes its Operator Mono
@@CatalinMironDev oh thanks that was quick.. ❤. Love from India.. ❤
Amazing man...
You are awesome
what a great tutorial
Sir you are amazing thank you so much