Bottom Sheet in Reanimated 2
HTML-код
- Опубликовано: 1 окт 2024
- Learn how to create a cross-platform animated bottom sheet in React Native.
This episode is as short as it can be, using Reanimated 2.
Share in the comments what you'd like to see in the next episode of You Can Animated!
Twitter: / eveningkid
Medium: / eveningkid
#reanimated2 #reactnative #react
Your contents are premium and unique. You are taking it to another level. Keep it up evening kid.
Thank you Mohamed, this means a lot to me :)
Two years later, this video is still incredible, thank you evening kid :)
Not working in Android properly not able to close its stuck. Any solution?
Dude, this is top quality content! Just subbed. Keep the reanimated tutorials coming
Really trying to keep this great to watch. Thanks a lot for saying that, it’s amazing to see it’s helpful! More to come :)
Is it on github?
Amazing video, just used it on my first app, but Im having a problem, cause the slider content sometimes overflows and if I set the overflow to scroll, the scroll movement is overlapped by the slider scroll, making it impossible to scroll the slider content. How do I fix that?
Well explained. I now feel comfortable enough to create my Bottom sheet
it could be great if the Home screen backgroundcolor set to something not #fff then it wasn't annoying,
the problem is you did not provide a link to code source
Can you share the starter code that you have ? I am not to react native.
how to blur background
this is awesome, can we get access to the code?
One thing to keep in mind is that this sheet is created with a normal view, so it won't show over the header or tab (if using react navigation). To get that behavior, wrap the whole thing inside a Modal from react-native and write some logic for showing and hiding the Modal on proper time.
@Hamza Hussain I don't think there is any way to render a view over the navigation bars etc. But there is a way to produce similar results. As the navigation object in any screen gives us the option to setOptions on the screen, you can use that to hide the navigation tabs and bars programatically (in your case, when opening the bottom sheet), this will span the sheet in the whole screen
Another great video ! I tried something like this with reanimated 1 but reanimated 2 has much simpler APIs. The only problem I have is that you use light theme 😥😂
This would have been a pain I believe to create with Reanimated 1, we agree! V2 is so much more readable...that’s insane. About the light theme, I never use this one but that’s for the video « theming » haha I should consider changing it maybe!
@@eveningkid yeah v1 implementation was tough I gave up and used the library but now I don't think I will consider using library.
I got your "theming"! "How to animated" videos follow light theming and other ones dark. Anyways great video 👍
Thanks man :)
Can create by animated from react native ?
Because reanimated such third party libs that in future will be has more breaking changes
Like reanimated 1 , to reanimated 2 some code structure changes and need more effort to do migration
It’s true. You can do it with Animated and a Pan Responder but it won’t be as smooth on every device. You could replace shared values with animated values, the gesture handler with pan responder handlers and withSpring with Animated.spring! It’s really a matter of replacing libraries (my how to animated series could help you with all the concepts)
@@eveningkid Thanks for explanation, just know reanimated is more optimize than pure animated from react native
amazing tutorial, I wanted to know how to add background blur, i just wanted to add the animation initial one, I do not have the requirement of pull, but want to blur the background.
Amazing video, very informative and helpful. Thank you! You gained a subscriber my friend 👌
You are THE BEST, goog JOB, thank you very much
thank you, simple and very helpppfullll. god bless you
Can you share your walktrough on how you got so good at react native, I kinda want to start react native
Honestly, there’s no magic recipe... I created many projects, spent countless days working on apps. If you know React and have an idea, you can go through the docs and learn from there based on your needs. You don’t need to know how I got my golden ticket, you gotta find yours!
@@eveningkid Ik react and I'hv actually made some apps with react native in past. I suffer with animations and no idea on how to work with them.
how implement this on class component?, sorry I'm newbe.
Is it work on android?Because I have occured error Javascript worklots error
Thanks a lot for this video, it's really helpful.
Above code works perfectly on iOS. However, pan gesture handler does not work while animation works fine on Android .
Maybe because of absolute positioning, has anyone got any idea?
This is better than trying to customize a library desperately.
why does not work in android physical device?
I m new to React Native and can you provide the code of this Video content.?
I must say that evening kid is so unique and knowledgeable... keep on with what you do we love your videos. Thanks alot 👍
Really good explanation, thanks
You made it so easy to understand! Awesome content! I always have a doubt about how to "organize" better the code and not let everything just be in the same file. There's any way to do that?
Attn to the dude who disliked the video: Did you spot an error in the code? You thought it could have been done in a better way? You were expecting a video about "bottom sheep" and got seriously frustrated? What is it?
This channel has over 99.5% of likes, I think we’re good with a few unhappy people! Now I wonder, what could possibly be a bottom sheep...haha
Great Video thanks
Interesting content and good explanation.
Please share the code this app
This is gold content.
Can you share the code?
Awesome! As I'm seeing video requests in the comments, let me add one: how would you approach a bi-directional infinite scroll? (e.g. Calendar on Android in planning mode)
This is quite a tough one, I’ll see if I could fit it into a short video! Either way, I’m sure you’ll find great things to learn on the channel. Thank you very much for your suggestion, it always cheers me up to read comments :)
lots of love
Hi, it is a really nice content. How do I use this component in other components? Since I am new to React Native, I do not know about it.
Hey Aytac, this is a tutorial to understand how it works but real-life bottom sheets can be much more complex than this. I'd recommend you to use react-native-bottom-sheet or react-native-reanimated-bottom-sheet, they're both well-made :)
Awesome example, you made this very easy to understand! Not a big fan of the light theme but I always look forward to watching your videos.
Thanks for letting me know Jacob. You’re not the only one asking for this, I might turn the whole theme dark next time :)
🤩 awesome sir
Thank you so much!
The way you explain things is astonishing, can i request a video on how to use the pinch gesture to zoom from any part of image? You know like zoom in a corner or the bottom center, I've trying to do this, but i just not skilled enough to make it work with reanimated 2
Thank you! I know what you're talking about, I'll see if I can make one. There's a lot already planned on this channel! Wait and see :)
@@eveningkid Gotta keep an eye on your channel then ;)
Great tutorial! Can you make a video on custom range slider?
Thanks for the kind words :) What do you mean exactly? Do you have an example maybe?
clearly this is premium content....
Thank you Almer, there’s a lot more you can find on the channel if you’re curious :)
Excellent video! You’re doing an awesome job 💯
Thanks a lot man, very happy this was useful to you!! You have no idea how much this kind of comment cheers me up :)
Thank you so much for these videos. Keep teaching us more❤️
No worries, I’m here to stay! Thank you for the kind words Prakhar :)
If u make step by step tutorial for Reanimated 2 with best projects i assure u , u will get much subscribers .
Thank you, Muhammad. Do you have some ideas on your mind? :)
@@eveningkid The idea is if u make tutorial step by step like the net ninja with full touching the basics and and each point with reference ,simple and understandable that will help u. And if u try some graphical explanation that will be more good
@@eveningkid As i searched and watched alot in youtube and google but this your tutorial touched my heart .
The video comes earlier than I expected 🥳 Thanks!
I remember someone asking for a bottom sheet... :)
Unless there is already a package out there, having a proper modal with backdrop etc... would be great. :)
There are really nice packages for that, this was just to illustrate how you can create one quite easily! :)
@@eveningkid I'm currently using react-native-modal which doesn't use Reanimated2. I was wondering if you knew of another react modal option that would leverage it
I used reanimated-bottom-sheet in the past, good one :)
Another Great video from you.
Thank you so much Alauddin! So great to know you liked it :) I hope to see you around!!
this is fucking awesome dude!
And that, is a freaking nice comment! Cheers man :)
awesome tutorial.... keep the coming...
Thank you! Is there something you'd like to see next? :)
Subscribed. Thank you very much from Sri Lanka 🇱🇰
Crazy to think how global this gets! Thank you so much for saying this, very happy this was helpful. Have you been coding in RN for a long time? :)
@@eveningkid Yes, I'm a RN developer. I always had some issues with understanding RN animations. Luckily I found your channel today. Now I decided to dig deep into RN animations. Thank you for that. I've already shared your channel with my colleagues...😊
Thanks a lot Akmal, that’s really nice of you! Hope to see you around!
You are spencer carli from react native school ?
the voice is very similar, isn't it? haha
That’s very possible. You might ask him just to make sure!
Valuable video. Keep going
Thank you, this is definitely the kind of comment that keeps me going! So...keep posting too hehe :)
an awesome video again, thaaaaaanks
Thank you Guillaume! It’s really cool to see you commenting a few times, it helps me a lot :)
Great video! Thanks !!
Thanks a lot for leaving a comment, glad this was helpful :)
Amazing as always, thank you!
Thank you so much, this really helps me keep going :)
Just wow, your content is amazing
Just...thank you! I know it might be nothing for you to leave a comment but it means a lot to me. Thanks a lot, glad this is helpful to you :)
@@eveningkid Keep going ;)
This is how you teach about animation, visually. Thank you for the high-quality content and clear explanations. Please keep it going. Easily subscribed.
Thank you so much for saying it, I’m very happy you found this helpful! Hope you’ll like the next videos :)