Thank you so much jiazheng (not sure what are the characters for your name :))! I really appreciate the kind words, it really motivates me to keep going
Yep, totally agree. I try to keep videos as short as possible on the channel so this is more of a starter kit! It still looks a lot alike and you can make it in ~10 minutes. Not a big fan of 30-40min long videos but that's just my take!
"KISS" ! It really shows how much powerful react native's Animated API is. You probably don't need Reanimated for these small things. Loved the video !
Exactly: when you can just stick to Animated and keep it fast, then why not :) I guess some people might just assume Animated is bad from what you can hear/try yourself. Anyways, happy you liked the video!!
I don’t but I’m sure you can get it to work! If you think about this before getting into code, it might help you :) I’m very happy you liked the video, see you around!
Amazing how simple it is and you explained very nicely ❤. I actually tried to create a clone of the profile UI but something that I couldn’t do was there is a tabbar below and when you scroll vertical then scroll horizontal and then scroll vertical how does the height thing works here. I used a horizontal scrollview inside to do this and that problem was if I have 2 tabs and their list below respectively the bigger list will give it’s height and then tab 1 list is not even that big but can scroll that much. The same thing is in the Instagram profile Ui. What I noticed same in both was in any tab list if I scroll to the bottom and then change tab and scroll to top then again go back to the previous tab it is back on top also. I really really wanna implement this
Yes Hari, that's true. Another comment mentioned that and my answer is: I try to keep these videos as short as possible. I'm sure people can then give it a try and improve the projects, this serves more of a starter kit and a showcase of what can be done in ~10 minutes! I'm not really a fan of 30-40 min long videos, I want as many people as possible to have a great time without dedicating that much time to the video. Hope that makes sense! :)
Thank you Denis! I can't believe you've been following the channel for all this time...we're soon 1000 can you believe it! It always makes me happy to see continuous support like yours. Have a nice day :)
Great tutorial! However my situation is that mine's not a banner but a carousel fixed on top with parallax that requires swipe left/right. But because of scrollview being a top layer, i cannot get the swipe left/right gesture to work. If I put the carousel (banner) inside the Animated ScrollView, then I lose the absolute top image height stretch. Would very much appreciate your advice!
Ok I'm thinking out loud but: 1) put your carousel inside your scrollview 2) when scrolling below 0, you could add a negative translation to the carousel: scroll.interpolate({ inputRange: [-1, 0], outputRange: [-1, 0], extrapolateRight: 'clamp' }) 3) find the right scale value so that it fills up the now empty space (because of the translation). You could use interpolation here again 4) next time I'd recommend you to post this on stack overflow so that other people could benefit from the answer Cheers :)
Hi bro, our app performs well in iOS, however the performance in android is super jerky. Additionally it takes time in startup as well, do you have any recommendations on how we can figure our better? Like profiling and fixing performance.
Interesting, thanks for letting me know Akshat! It's surprising since it's running with the native driver...you could convert this example to Reanimated. Just need to replace the animated value with a shared value and put styles inside animated styles. The performance might be better!
Awesome video. Loved the detailed walkthrough! Would have been interesting seeing this on Android & Web. Also I'd love to see this using more modern animations APIs like reanimated 2.
Thank you, Angel! I really try to keep these videos as short and minimal as possible. It's a trade-off but I think it helps a lot more people in the long run (but that's just my opinion!). I plan to make more videos on RN Web so it should eventually come :) I've done a lot of Reanimated 2 already and more is to come, all of this takes time as you know! I've seen you've been around for more than a month now, thanks for your support really :)
@@eveningkid that makes total sense. Agree, it's a trade-off between helping beginners or experienced users. Tbh prefer the first. Just wanted to share my 2¢. Forgot to ask you about the code, any plans on making it open source? Or even a patreon to further support you?
Sure, I really enjoy hearing your opinion so thank you! The code is available in the description (there's a gist link). I thought of doing Patreon but I really don't want to discriminate anyone who wouldn't have the money. Not sure how to deal with this, since I also spend so much time working on these videos!
Well done keep working on good stuff. 👍 I just want to give you suggestion can you do in flatlist go to particular item? On clicking like go to 5th item of 1000 items
The episode is out earlier this week because I’m preparing something special for Friday, stay tuned :)
really enjoy it, your channel is the best RN animation tutorial ever found.
Thank you so much jiazheng (not sure what are the characters for your name :))! I really appreciate the kind words, it really motivates me to keep going
Would be cool to also include the material tabs in this animation so they stick along with the header
Yep, totally agree. I try to keep videos as short as possible on the channel so this is more of a starter kit! It still looks a lot alike and you can make it in ~10 minutes. Not a big fan of 30-40min long videos but that's just my take!
@@eveningkid yes, too long videos are not always good .
Great example of using interpolations! Thanks evening kid!
Interpolations everywhere!! Thank you Simon :)
"KISS" ! It really shows how much powerful react native's Animated API is. You probably don't need Reanimated for these small things. Loved the video !
Exactly: when you can just stick to Animated and keep it fast, then why not :) I guess some people might just assume Animated is bad from what you can hear/try yourself. Anyways, happy you liked the video!!
Thanks for making these videos, they are simply awesome
Do you have tutorial for sticky tab bar on header with this animated effect?
I am looking for it.
This tutorial is good. Very helpful.
I don’t but I’m sure you can get it to work! If you think about this before getting into code, it might help you :) I’m very happy you liked the video, see you around!
Amazing how simple it is and you explained very nicely ❤. I actually tried to create a clone of the profile UI but something that I couldn’t do was there is a tabbar below and when you scroll vertical then scroll horizontal and then scroll vertical how does the height thing works here. I used a horizontal scrollview inside to do this and that problem was if I have 2 tabs and their list below respectively the bigger list will give it’s height and then tab 1 list is not even that big but can scroll that much. The same thing is in the Instagram profile Ui. What I noticed same in both was in any tab list if I scroll to the bottom and then change tab and scroll to top then again go back to the previous tab it is back on top also. I really really wanna implement this
Good explanation. Subscribed
Nice, but how to add a sticky TabView to it like on twitter?
How about including Tab Navigator, because it hard to handle Flatlist Pagination inside Tab when Flatlist Nested in Scrollview , nice tutorial btw
Yes Hari, that's true. Another comment mentioned that and my answer is: I try to keep these videos as short as possible. I'm sure people can then give it a try and improve the projects, this serves more of a starter kit and a showcase of what can be done in ~10 minutes! I'm not really a fan of 30-40 min long videos, I want as many people as possible to have a great time without dedicating that much time to the video. Hope that makes sense! :)
why image hiding in banner image ?? please solve
Great tutorial ! Thanks !
Thank you Denis! I can't believe you've been following the channel for all this time...we're soon 1000 can you believe it! It always makes me happy to see continuous support like yours. Have a nice day :)
@@eveningkid Its just a beginning :) You are doing really useful videos, keep doing it.
very awesome, thank you very much bro
Amazing tutorial, Thank you very much !!!
Thank you Akmal, always a pleasure really to read your comments :)
Please make more vedios on animation
This is awesome thanks!
Time flies, you've been around for one month already!! Thanks for your support, I always appreciate it Dan :D
dude u are amazing!!!! holy shit
Wow thanks man, that’s a lot!!
Great tutorial! However my situation is that mine's not a banner but a carousel fixed on top with parallax that requires swipe left/right. But because of scrollview being a top layer, i cannot get the swipe left/right gesture to work. If I put the carousel (banner) inside the Animated ScrollView, then I lose the absolute top image height stretch. Would very much appreciate your advice!
Ok I'm thinking out loud but:
1) put your carousel inside your scrollview
2) when scrolling below 0, you could add a negative translation to the carousel: scroll.interpolate({ inputRange: [-1, 0], outputRange: [-1, 0], extrapolateRight: 'clamp' })
3) find the right scale value so that it fills up the now empty space (because of the translation). You could use interpolation here again
4) next time I'd recommend you to post this on stack overflow so that other people could benefit from the answer
Cheers :)
did you find a solution to it ? :)
You are amazing
Nice! But also excited for the Friday special 😉
I'm excited too!! It feels like we can all gather around for an hour and that's an amazing thing to have these times haha see you soon :)
Cool!!, it's not working for android bro, the avatar is behind the navigator bar. any idea.
Mmm, I'm afraid I have no clue. Maybe this is related to a zIndex somewhere?
Hi bro, our app performs well in iOS, however the performance in android is super jerky. Additionally it takes time in startup as well, do you have any recommendations on how we can figure our better? Like profiling and fixing performance.
Interesting, thanks for letting me know Akshat! It's surprising since it's running with the native driver...you could convert this example to Reanimated. Just need to replace the animated value with a shared value and put styles inside animated styles. The performance might be better!
Well done again :)
And thanks again! I appreciate the fact you're still around after all this time, it really means a lot :)
This is amazing,
Thank you Ashutosh!! Glad this helps :)
Awesome video. Loved the detailed walkthrough!
Would have been interesting seeing this on Android & Web.
Also I'd love to see this using more modern animations APIs like reanimated 2.
Thank you, Angel! I really try to keep these videos as short and minimal as possible. It's a trade-off but I think it helps a lot more people in the long run (but that's just my opinion!). I plan to make more videos on RN Web so it should eventually come :) I've done a lot of Reanimated 2 already and more is to come, all of this takes time as you know! I've seen you've been around for more than a month now, thanks for your support really :)
@@eveningkid that makes total sense. Agree, it's a trade-off between helping beginners or experienced users. Tbh prefer the first.
Just wanted to share my 2¢.
Forgot to ask you about the code, any plans on making it open source? Or even a patreon to further support you?
Sure, I really enjoy hearing your opinion so thank you! The code is available in the description (there's a gist link). I thought of doing Patreon but I really don't want to discriminate anyone who wouldn't have the money. Not sure how to deal with this, since I also spend so much time working on these videos!
Awesome!
Thank you!! Cheers :)
Well done keep working on good stuff. 👍
I just want to give you suggestion can you do in flatlist go to particular item? On clicking like go to 5th item of 1000 items
Thank you Muhammad :) This is possible using flatListRef.current.scrollToIndex({ index: your_index }) reactnative.dev/docs/flatlist#scrolltoindex
@@eveningkid its for only i think fixed height
How for random height
You need to compute it one way or another, because it’s a virtual list so it can’t guess how far it should scroll
Love each and every one of your videos. Still am clueless over what "You can animated" is supposed to mean.
You can animate it (it's a """pun""" on RN Animated)
Awesome video, i can create a lot of thing animation now because your tutorial.👍keep it create new content.
Wow, I'm very happy this is being helpful Amrel! Hope it's all going fine with your work, I'll sure keep them coming :)
First!
Fair :)