Hi Syed, I think it is an extremely interesting component to build. Both because it is particularly useful and because it encapsulates so many concepts 👀
Wonderful, and now I don't need any finicky packages outside of just reanimated, and have a reusable component until the end of time (or until the tech changes!) You're awesome!
The explanations are very clear, everything is sweet and functional, and the video is partitioned, which is really just a joy, Monsieur. Subscribed and liked for me 🫡
Very underrated channel, really glad I found it. Thank you for your great tutorials and I hope you keep it up! I've been learning a lot from you, and there are very few resources on YT that go into React Native topics beyond the very basics.
Super amazing!...you made me also understand the concept of the bottom sheet in reverse! very detailed and most importantly very very well explained. Thank you very much. Exactly what I needed
DUDE! You are a master! Thank you so much. This helps explain a lot of how React works so well!!! Love how simple this is, everything should be like this 🙏
Nice tutorial. Just had to inform that you don't need another useSharedValue to create a context variable, since each gesture handler (onActive, onStart, ...) receives both the event and "context" arguments, and you can share this context between any other gesture handler. Edited with an Eg: onStart: (_, ctx) => { ctx.startX = x.value; }, onActive: (event, ctx) => { x.value = ctx.startX + event.translationX; }, onEnd: (_) => { x.value = withSpring(0); }
How do i add a faltlist, and make the gesutre stop moving the bottom sheet and move the list instead? Update: Use import { FlatList } from 'react-native-gesture-handler';
If you are planning on using a scrollview or flatlist within the bottom sheet you should import them from 'react-native-gesture-handler' as such import { ScrollView as Scroll,FlatList as Flat} from 'react-native-gesture-handler' i impoerted them as other things because i already have a other ScrollView and Flatlist im using from 'react-native'
Great video, explain the functionality and added real-world use cases. bravo! update: i tried to extend to see when it hits top, but got an error. how can the app look into the bottom sheet to get its max values and current position?
thanks for the videos can you make video on implementing phonepe, gpay, upi transaction in react native cli as a beginner we need more videos on complicated topics
Great tutorial! As im going through it getting some issues. Figured I'd comment the resolutions here in case it helps anyone. Issue #1 at about the 6:00 mark you use GestureDetector this was throwing the error Cannot read property 'toGestureArray' of undefined. To fix this I had to add the component TapGestureHandler like so import { Gesture, TapGestureHandler, GestureDetector } from 'react-native-gesture-handler' .... rest of the code here
The video is amazing and very informative. The one thing I found was that at the start your communication was not interesting, so actually I skipped this video. Then again my friend told to watch it. I don't think no one else has this good content. Just keep the video interesting importantly in the start. Besides that I learned lots of things. Thanks!!😇
Amazing tutorial, a small addition could be a low opacity background to differentiate the BottomSheet from the content. Since you used black background that doesn't make sense, but in a real setting that would be a white UI usually and also the BottomSheet is white.
Hi Thomas thanks for the feedback! In order to implement a backdrop I would use something like the interpolate api (from reanimated) with a black overlay
Hello, thank you for this tutorial, just one question. How do I get a scroll view working properly within this bottom sheet? It doesn't let me scroll all the down to the bottom. -Thank you!
Really nice video as always! How about a video about layout transitions where we have a grid of images having various sizes and once we tap on the image it gets removed and all other images get reorganized? Also, I think your channel should be mentioned in the React Native reanimated official docs as it's extremely helpful. :) I wish William Candillon in his 'Can it be done in React Native' series explained things like you do. I watch his videos being very impressed by his knowledge while understanding nothing.
Thanks for your awesome video. I had a case where it was possible to scroll in children's screen whether bottom sheet height is SCREEN_HEIGHT/3 or fullscreen height. Can you help me to resolve it?
I wonder if you could create a bottom sheet with a nested flatlist or scrollview, i use scrollTo when reaching the top, but the performance it's quite low
Hi Amur, It's a beautiful idea. I was recently thinking of doing something similar using the Telegram header animation as a reference. Let me know if you were thinking of a specific animation (from an app or a dribbble animation).
Amazing tutorial and explanation ☺️ I have a question tho. How could be integrated a blurred background behind it like in modals ?🤔 could you give some hints ? Thx in advance ☺️
Very nice lecture, thanks for it , I have question I have text field inside the bottom sheet , I need one functionality that, if the bottom sheet height is -SCREEN_HEIGHT / 3 I don't want to render the text field and if the bottom sheet is taking the full height of the screen , it should render the text field.
one more question how did you get so deep knowledge about all of these hooks can you please make a video that how you study these things and you can say the approach to learn in depth.
Hi Daljeet, I honestly don't consider myself to be particularly good at Reanimated (some things I learned at my old company but many I learn by trying to share videos on UA-cam). The first trick to learning is simply to be consistent. The second trick is to never settle for the first solution and always look for the most elegant one.
Great tutorials what would happen if create multiple instances of this BottomSheep components , i mean use it in varios page inside the app, it creates multiples instances or just one with different content inside?
That's a great question! This implementation will create multiple instances but you can easily overcome this problem by moving this component into a Custom Provider and managing it via Context APIs
Hi Mist, nesting a Scroll Component in the BottomView with a smooth animation is definitely harder and this solution won't be enough (but it could be a good starting point). If you just want to implement the functionality in a fast way I highly recommend you the react-native-bottom-sheet package
I really need to lean Typescript 😌;
Thanks buddy this is gold.
Greetings from Tanzania 🇹🇿
Oh man ! You took my question so serious 😬. Thank You so much bro. Keep inspiring. ❤️❤️❤️
Hi Syed, I think it is an extremely interesting component to build. Both because it is particularly useful and because it encapsulates so many concepts 👀
@@Reactiive That’s exactly why I asked you this question because I wanted to create it myself and have control over it.
@@DrKenzoT Thank you for asking and big thank you to the creator!
Wow, this is what I needed. Your videos are very well explained, keep it up.
Hi Youssef, thank you very much for your feedback 🤓
Wonderful, and now I don't need any finicky packages outside of just reanimated, and have a reusable component until the end of time (or until the tech changes!)
You're awesome!
Always like before watching because I know you dont disappoint
Thank you Rami 😁
I was waiting to see if you were going to use the `useImperativeHandle` hook for the button ref. As soon as you did you earned another subscriber! :)
Just kudos to your content, saved lot of time and taught a self dependent component in easy and best way, thanks again
Thanks a lot, really appreciated ❤
This is what I'm looking for. Thank you, Enzo!
Thanks for the explanation on the interpolate function, I understood it better than in the docs .
This is what I'm looking for. Thank You so much bro. Keep inspiring
excellente, bravo! I learnt alot , I just have to go over and over again .well done
The explanations are very clear, everything is sweet and functional, and the video is partitioned, which is really just a joy, Monsieur. Subscribed and liked for me 🫡
What a feedback! Thank you so much 😁
Very underrated channel, really glad I found it. Thank you for your great tutorials and I hope you keep it up! I've been learning a lot from you, and there are very few resources on YT that go into React Native topics beyond the very basics.
Well explained.
I enjoyed it.
Please keep posting these kind of informative videos on react native.
Thank you
This is amazing, and I really loved how flawlessly you implement this. Just bonkers!⚡⚡⚡
Thank you so much implemented it in my Live project love from India
Glad to hear that! Thank you 🍻
BEST TUTORIAL FOR ANIMATION EVEEEEEEEEEEEEEEEEEEEER!!!!
Amazing video. Very helpful.
Thank you for the amazing work. Can you make one with the ScrollView in ?
Can you make a second part of this video and tell us how to add the product to the Bottom Sheet? please
Amazing! This video in very informative and simple. I really liked it.
Super amazing!...you made me also understand the concept of the bottom sheet in reverse! very detailed and most importantly very very well explained. Thank you very much. Exactly what I needed
DUDE! You are a master! Thank you so much. This helps explain a lot of how React works so well!!! Love how simple this is, everything should be like this 🙏
Nice tutorial. Just had to inform that you don't need another useSharedValue to create a context variable, since each gesture handler (onActive, onStart, ...) receives both the event and "context" arguments, and you can share this context between any other gesture handler. Edited with an Eg:
onStart: (_, ctx) => {
ctx.startX = x.value;
},
onActive: (event, ctx) => {
x.value = ctx.startX + event.translationX;
},
onEnd: (_) => {
x.value = withSpring(0);
}
easily the best channel on youtube. You have improved my react native design so much. THanks man
Cool and very good explained!
So happy I found your video and channel. This was fantastic 👏
Amazing explaination.... Loved it. implemented it and boom.
Dude, you saved my life. thank you so much
Thank you.
Your video was thorough and easily to follow. 10/10
I really appreciate this work
Wow. Exactly what i needed!! Nice job!!
How do i add a faltlist, and make the gesutre stop moving the bottom sheet and move the list instead?
Update: Use import { FlatList } from 'react-native-gesture-handler';
I love you guy.
thanks you saved me
how if content has scrollview scrollview/flatlist how to handle the scroll ?
this exactly what i need !!! i really enjoyed your video and the way you explain things
keep it up !!
Wooooooow very good. that was very good. i have learned a lot of new thing.
If you are planning on using a scrollview or flatlist within the bottom sheet you should import them from 'react-native-gesture-handler' as such import { ScrollView as Scroll,FlatList as Flat} from 'react-native-gesture-handler' i impoerted them as other things because i already have a other ScrollView and Flatlist im using from 'react-native'
well thanks mam
Such a high quality video, this is awesome man, thanks so much for doing this
that's exactly what i need, thank you!
Great content, subbed and liked!
I really like your calm style :)
Thank you Sir! TNice tutorials helps alot !
Awesome, thanks. I've subscribed and look forward to your other tutorials
Thank you for this! You are such a smooth coder, if that makes any sense :)
Brilliant explanation! Keep going, you're helping so much❤🐢
Great video! is just I was looking for! Chears and thankyou
Great video, explain the functionality and added real-world use cases. bravo! update: i tried to extend to see when it hits top, but got an error. how can the app look into the bottom sheet to get its max values and current position?
Thank you for your video.
Can I ask you a question?
how to fade background out of bottomsheet, and how to close bottomSheet when touching background
You are a super person. Tysm for this content. ❤❤
LIKED AND SUBSCRIBED!!
thanks for the videos can you make video on implementing phonepe, gpay, upi transaction in react native cli as a beginner we need more videos on complicated topics
Phenomenal video :) keep them coming.
Very good explanation ✨✨🙏🏻
Wooow,, to prevent overflow the view , it is really great solution to use Math.max. It would be difficult to handle this problem. Thank you
Great video, thanks!
Hi Radomir, thank you!
Thank you So much for this wonderful tutorial..
Nice video! You really helped me.
Nice tutorial thanks
Great tutorial! As im going through it getting some issues. Figured I'd comment the resolutions here in case it helps anyone.
Issue #1 at about the 6:00 mark you use GestureDetector this was throwing the error Cannot read property 'toGestureArray' of undefined. To fix this I had to add the component TapGestureHandler like so
import { Gesture, TapGestureHandler, GestureDetector } from 'react-native-gesture-handler'
.... rest of the code here
Great content! Keep up the good work.
The video is amazing and very informative. The one thing I found was that at the start your communication was not interesting, so actually I skipped this video. Then again my friend told to watch it. I don't think no one else has this good content. Just keep the video interesting importantly in the start. Besides that I learned lots of things. Thanks!!😇
Thank you so much for the tutorial
Amazing tutorial, a small addition could be a low opacity background to differentiate the BottomSheet from the content. Since you used black background that doesn't make sense, but in a real setting that would be a white UI usually and also the BottomSheet is white.
Good video. But could you add some backdrop animation too ? Could be nice to see this feature
Hi Thomas thanks for the feedback! In order to implement a backdrop I would use something like the interpolate api (from reanimated) with a black overlay
Hello, thank you for this tutorial, just one question.
How do I get a scroll view working properly within this bottom sheet?
It doesn't let me scroll all the down to the bottom.
-Thank you!
THANK YOU FOR THIS AMIZING VIDEO . I ASK YOU IF YOU CAN DO AVIDEO HOW TO DO A CIRCUL MOVING
I love your content 💙💙
Can you please do picker
You are great man. Thanks 👍
Nice thanks bro
i like it , very very cool,
Nice video thanks
Thank you so much.
I love this ❤
Nice tutorial. Make more!
Amazing content 🥰🥰
great and clear, Thanks.
But I have a small question, how can we handle the scrollView or Flatlist inside this custom bottomSheet?
Really nice video as always! How about a video about layout transitions where we have a grid of images having various sizes and once we tap on the image it gets removed and all other images get reorganized? Also, I think your channel should be mentioned in the React Native reanimated official docs as it's extremely helpful. :)
I wish William Candillon in his 'Can it be done in React Native' series explained things like you do. I watch his videos being very impressed by his knowledge while understanding nothing.
Great job!
you are the hero 🔥🔥🔥
Great work.
Fortissimo.
Thanks for your awesome video.
I had a case where it was possible to scroll in children's screen whether bottom sheet height is SCREEN_HEIGHT/3 or fullscreen height.
Can you help me to resolve it?
Very nice! New subs here! Thanks for video!
I wonder if you could create a bottom sheet with a nested flatlist or scrollview, i use scrollTo when reaching the top, but the performance it's quite low
What a great video! Straight to the point and perfectly explained. Thanks for uploading tNice tutorials!
@Reactiive what about Collapsible and expandable header ? Not a parallax one but more like it expands/collapses on either up or down direction.
Hi Amur, It's a beautiful idea. I was recently thinking of doing something similar using the Telegram header animation as a reference. Let me know if you were thinking of a specific animation (from an app or a dribbble animation).
thank you so much
Amazing tutorial and explanation ☺️ I have a question tho. How could be integrated a blurred background behind it like in modals ?🤔 could you give some hints ? Thx in advance ☺️
Very nice lecture, thanks for it , I have question I have text field inside the bottom sheet , I need one functionality that, if the bottom sheet height is -SCREEN_HEIGHT / 3 I don't want to render the text field and if the bottom sheet is taking the full height of the screen , it should render the text field.
Thanks for explaining a concept like animations, which is not that easy to grasp!
outstanding ❤️
Thank you so much, this tutorial so great
why in this case, the onPress function needs to be wrapped inside a useCallback?
osm video great job ❤
one more question how did you get so deep knowledge about all of these hooks can you please make a video that how you study these things and you can say the approach to learn in depth.
Hi Daljeet, I honestly don't consider myself to be particularly good at Reanimated (some things I learned at my old company but many I learn by trying to share videos on UA-cam). The first trick to learning is simply to be consistent. The second trick is to never settle for the first solution and always look for the most elegant one.
@@Reactiive Thanks :) for sharing
Great tutorials
what would happen if create multiple instances of this BottomSheep components , i mean use it in varios page inside the app, it creates multiples instances or just one with different content inside?
That's a great question! This implementation will create multiple instances but you can easily overcome this problem by moving this component into a Custom Provider and managing it via Context APIs
@@Reactiiveyou’re right . Thanks for tour time 🤙🏼
brilliant
Thanks!!!
Now, how do you put a black, transparent backdrop below the bottom sheet?
Hi Angelo, few days ago I've published the part 2 with this problem solved 🙄
Will this work if BottomSheet hosts a scrollview? will the scrollview consume the scroll gesture?
Nice! But how it works with ScrollView?
Hi Mist, nesting a Scroll Component in the BottomView with a smooth animation is definitely harder and this solution won't be enough (but it could be a good starting point). If you just want to implement the functionality in a fast way I highly recommend you the react-native-bottom-sheet package
@@Reactiive Ok thanks!)
@@mist5322 Did you figure out how to get this to work? Any resources?