Spotify Scrollable Header - “Can it be done in React Native?”
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- In this video, we are looking at the Spotify scrollable header. I hope that you will enjoy the video! 😀 Let me know what you think.
Wanna learn the fundamentals of Gesture Handler and Reanimated? Check out my online course at start-react-native.dev.
The full example is available at snack.expo.io/@git/github.com...
You can check it out on GitHub as well at github.com/wcandillon/can-it-...
I mentioned a React Native bug in the video, here is the link: github.com/facebook/react-nat...
The boilerplate project if you want to follow along with the example is available at bit.ly/2IhtVjx
Want to build your best app yet? Check out react-native.shop/elements.
Do you like the series? You can support the channel by buying me a coffee at react-native.shop/buy-me-a-co... ☕️.
Are you sometimes asking yourself "Can it be done in React Native"? Send me your suggestions at wcandillon@gmail.com - วิทยาศาสตร์และเทคโนโลยี
When I'm thinking about building some cool animations first thing I think about is "better check if William did it already", so I can get good code and understand it hahah
Thanks man!
I really love your lectures. Thanks william for producing awesome content.
Awesome. You make animated seem very easy to use.
This's really amazing video about react native. Thank you so much!!! ❤️❤️❤️❤️
Awesome video William !!! I have learned so much from you. Thousand thanks to you!
You are definitely most welcomed :)
Woooohoooo ! One more great thing to explore !
This video is really helpful, thank you so much
Awesome as always 🎉 Thank you so much!
Thank you :)
Congrats on the great content! Keep it up
Thks!
Great as always. Thank You!
Woah thank you :)
Finding exactly what you want on the internet is truly a blessing omg
This make so much sense and like the video so much and can understand it
Amazing, left a like and subscribe!
Thank you so much for helping us out 😊
You are most definitely welcome :)
Wow, you motivate me so much to get better thanks!
I get this feeling sometimes watching TH-cam :) Thanks man, really appreciate!
Amazing video! As a beginner with animations I was hoping you were going to explain some of the decisions you made, like why you use 'extrapolateRight' instead of just 'extrapolate' for example. I know that I can read the docs, but it also helps a lot to hear someone explain WHY they chose X vs. Y. Basically, I think it'd be super helpful if you explained more of what's going on in your head (which I know can be difficult). Do you have other videos where you explain the basics of the reanimated library?
true :) in this particular case, I was just trying to be fancy, interpolate will work fine. I'm also working on a reanimated course.
Very interesting and great series 👍🏼👍🏼👍🏼👍🏼
I really like your videos. I do have a question about sizing elements. I can see that in most of your videos you use constants for your item sizes. Is that a common way to handle layout dimensions in react-native? I guess what i'm asking is how would you handle different phone screen-sizes. Would you have a size modifier which is calculated by the real screen dimensions or is the difference negligible in the context of screen size difference and still looks OK in most phones?
wow just found your video today. I hope could learn react from here
Lmao this is not the place is to learn react for beginners I'm just like you.. and he doesnt seem to care for the beginners.. this is for advance students not me and you.
Will the onEndReached() of the flatlist be called if Flatlist is used in this example?
Can you explain why in the interpolate of the cover you go from a negative y value?
Hi William,
just a question
If you a similar scrolling
for example
I have tabs from native base that is under the header which is collapsible
let's say the header max is 300 and when its collapsed, it will be 200 for example.
What I want is I want to disable scroll view of the tabs till I reach a certain point then I am allowed to scroll the inner scroll view
hope you get my point, i have been looking to fix this for a while now but I have no clue
I tried, scrollEnabled={false} on the inner scroll view and it worked but there is no way to switch back to true and allow it to scroll then If the user wants drag the scroll view back he can.
Can you give me an idea on how to fix such a thing.
A good example would, open table app
Regards
we love you man
And I love you guys too ☺️
Would you still do that way? Or do you have new pespectives?
Thank you!
Your contente is awesome!
What if the album cover is a carousel? how would you get the swipe left/right happening on carousel when it's underneath the Animated.ScrollView? Many Thanks
Hi William, I'm from chennai, India. I love your videos. It is very helpful. Could you please do a video recreating Google Play profile scrollview animation.
Does anyone have an example of doing this with reanimated 2?
Amazing
Nice one. I was able to do the same with ScrollView but I got stuck implementing in with FlatList. There's no such component like Animated.FlatList 🤔
Cool video
I love your videos. Do you have any courses about animation and ux in react native ?
I'm working on it :) Thank you for your patience 🙏🏻
I have one at start-react-native.dev
Is there any problem if I want to animate/scale something which is inside the scrollable while you scroll?
Great work. Does this work on andriod too
its RN version 0.61.5 and i think the shuffle play lag you mentioned in 26:00 still persists on both platforms. In this example however it is pretty difficult to spot the delay in the animation, although your work around probably works great. Im about to try and implement it in my case of use.
work around works perfectly! great tutorial! liked + sub
Hi William, it's really good! i have a challenge! how to implement sticky header with tabs ? like instagram profile. thanks!
Could you explain the extrapolateRight on the scale interpolation of the image? why not just extrapolate?
We don't want to add a limit on how large the image could get by scrolling up, but when scrolling down, it needs to not go lower than 1. Of course a plain extrapolate would work too since it's impossible to scroll up that much on iOS
Implementation with the tabbar component instead of scrollview
7:45 Sorry I am new to react native, is that 'SDK 43' or something else?
amazing...
Haha thanks man :)
Really great work! Love your channel.
I would use stickyHeaderIndices prop of ScrollView for shuffle button though. In my mind right now it makes more sense (haven't tried it yet with that example, but have done something similar already).
Thanks a lot! I'll look into it and update the example. Will it work since the small header layer is in between the button and the scrollable content? I'll check
@@wcandillon If you'll move it from Header and place in between of the song list and header, it should, since it will be upper than the header, so it will have bigger zIndex. So the index of that view will be `1` and it should just work.
@@wcandillon Here is my version, check it out (not perfect, though, but might give you some inspiration) :)
github.com/wcandillon/can-it-be-done-in-react-native/compare/master...terrysahaidak:tr-fix-spotify-sticky-header
(some of the changes are slightly random, didn't have enough time to get into your code properly)
@@terrysahaidak Looks amazing thks! Reviewing the changes now. You rock ;-)
@@wcandillon Your feedback would be appreciated :)
Unfortunately the example on expo could not be loaded
I love your videos! You look like Johnny Sins
Haha thks I guess 😅
😅😅
Haha
hahha Johnny sins with another job :D
Is it not possible to do this in React Native CLI? :(
Is onScroll function available on "react-native-redash": 3.3.2 because on version 14 I’m encountering bugs
onScrollEvent should be used
Have you find how to resolve it ?
i love to purchase your course, but do have tutorial for js, because im not familiar with typescript
I do address this topic at start-react-native.dev/lessons/development-setup. If you think that it will be fine, send me an email at wcandillon@gmail.com and I will send you a discount code.
Hi there! I am trying to implement the animation. But I get an error: undefined is not a function (near '...proc...') when importing onScroll from 'react-native-redash'. Can't find any related issues. Any ideas?
importing like this: import { onScrollEvent } from "react-native-redash/lib/module/v1"
i noticed that react is pretty much transitioning to using just functional components. Or something like this. Is that right so? and where can i give a deep dive on it, to gradually update my old components and uis that are already in production? thanks man! and keep up the good work, you are awesom!
Absolutely you should look into hooks:
th-cam.com/video/dpw9EHDh2bM/w-d-xo.html
reactjs.org/docs/hooks-intro.html
There is a high barrier to entry (similar to reanimated :)) but once you're into it, they are great :))
I have a basic question, what is difference of .js and .tsx? And can I use .js instead of tsx without changing any codes?
yes but you would have to remove the type annotations. I have a video on this topic at start-react-native.dev/lessons/development-setup I hope this helps!
@@wcandillon thank you! Yea this helps. I email you a suggestion for you next series! I hope you confirm it!
I love your videos and I think I've learned a lot of animations. But I struggle on how to make animation respond to property changes. Like a property `active` changes from `false` to `true` and have animation tied to that 😭I have found zero examples on reanimated on how to do such things.
Btw, your coffee page keeps rejecting my mexican card :( You should add a Paypal button too.
I agree that these are hard to do. I need to try the new Transition API from reanimated, it might help with that. Do you have an example based on a real-world app? I might do it on the channel.
@@wcandillon I have tons, but they are on a my bosses stealth and unreleased app XD. I think I'll do one of those Dribble UI exploration animations.
i love react , we are same religion :D
SO from Zürich
14:24 i'm weak at math could please tell me.. whats going on..
Great work William, Can you make some episode with JavaScript, not typescript?
But this is JavaScript (it runs through babel) + type annotations. Without the types animations, it is pure JavaScript. Why would you like to see vanilla JS?
Hmm, I just see the file extension as a " .tsx " so it's weird to me, so that's it :/
On ios it's easy peasy, but what about Android?
In this particular episode, it was the opposite (which is rare): easy peasy on Android, hard on iOS
Will Flutter kill React Native? because React Native not have exlusive support like Flutter
will we ever find out if a soviet nuclear power plant can be done in React Native...
Why Typescript ? Please use JavaScript
Tu n’es pas français ? 😅
sisi francais qui vit à Zürich 🙋🏼♂️
I think this is for advanced react native stidents not beginners at all. Thank you for wasting my time.
not his problem that you aren't smart enough 🤷♂