Building a BottomSheet from scratch in React Native

Подписаться 13 тыс.

Просмотров 89 тыс.

50% 1

In this tutorial we’ll learn how to create from scratch a BottomSheet component by using the reanimated and the react-native-gesture-handler package.
My React Native animations course: www.reanimate.dev
Source code: github.com/enzomanuelmangano/...
Learn more about React Native: www.reactiive.io
Support me on Patreon: / reactiive 🤓
Follow me on Twitter: / reactiive_
Animate with Reanimated Playlist: • Introduction to React ...
What about gestures Playlist: • Introduction to Gestur...
How to deal with interpolation: • Interpolate with Scrol...
Chapters:
00:00 Introduction
00:45 Setup
05:52 Setup the Pan behaviour
14:40 Interpolate the borderRadius
17:44 Handling the on release gesture
21:52 Controlling the BottomSheet from the button
29:52 Let's pass the "children"

Опубликовано:

24 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 211

@leakymalloc6157 2 года назад

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.

@gauravm. 2 года назад

This is amazing, and I really loved how flawlessly you implement this. Just bonkers!⚡⚡⚡

@ddikodroid 2 года назад

This is what I'm looking for. Thank you, Enzo!

@robertnyenge1188 Год назад

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

@tysonswing Год назад

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 🙏

@__iTsMe__ 2 года назад

This is what I'm looking for. Thank You so much bro. Keep inspiring

@youssefmuhamad3213 2 года назад

Wow, this is what I needed. Your videos are very well explained, keep it up.

@Reactiive 2 года назад

Hi Youssef, thank you very much for your feedback 🤓

@cbclapp 2 года назад

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!

@raymondmichael4987 2 года назад

I really need to lean Typescript 😌; Thanks buddy this is gold. Greetings from Tanzania 🇹🇿

@thenightguy6816 Год назад

Thanks for the explanation on the interpolate function, I understood it better than in the docs .

@sujitprasadkushwaha9031 6 месяцев назад

Well explained. I enjoyed it. Please keep posting these kind of informative videos on react native. Thank you

@matkosetnik7354 Год назад

Wow. Exactly what i needed!! Nice job!!

@faouzielbakri 2 года назад

this exactly what i need !!! i really enjoyed your video and the way you explain things keep it up !!

@NicholasVerkaik 2 года назад

Thank you. Your video was thorough and easily to follow. 10/10

@alecmather Год назад

Such a high quality video, this is awesome man, thanks so much for doing this

@gianm94 9 месяцев назад

Great video! is just I was looking for! Chears and thankyou

@JustinRichardson-yo5ve 3 месяца назад

So happy I found your video and channel. This was fantastic 👏

@oliechan 2 года назад

Great content, subbed and liked! I really like your calm style :)

@felipemelendez5741 Год назад

Awesome, thanks. I've subscribed and look forward to your other tutorials

@fabriziadicristo5777 2 года назад

Brilliant explanation! Keep going, you're helping so much❤🐢

@teminoah2960 3 месяца назад

excellente, bravo! I learnt alot , I just have to go over and over again .well done

@TimothyDzokoto 2 месяца назад

Amazing! This video in very informative and simple. I really liked it.

@prakharkhandelwal739 Год назад

Amazing explaination.... Loved it. implemented it and boom.

@DigitalAndTradingSolutions Год назад

Just kudos to your content, saved lot of time and taught a self dependent component in easy and best way, thanks again

@Reactiive Год назад

Thanks a lot, really appreciated ❤

@jo.repossi 6 месяцев назад

Cool and very good explained!

@vaibhavnaik2481 2 года назад

Amazing video. Very helpful.

@DrKenzoT 2 года назад

Oh man ! You took my question so serious 😬. Thank You so much bro. Keep inspiring. ❤️❤️❤️

@Reactiive 2 года назад

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 👀

@DrKenzoT 2 года назад

@@Reactiive That’s exactly why I asked you this question because I wanted to create it myself and have control over it.

@ivyhello Год назад

@@DrKenzoT Thank you for asking and big thank you to the creator!

@sherifsamir6888 Год назад

Dude, you saved my life. thank you so much

@komicproductions3887 2 года назад

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! :)

@cv_vegetation_mapping 2 года назад

easily the best channel on youtube. You have improved my react native design so much. THanks man

@HoussemBahri-nn3qt 3 месяца назад

I really appreciate this work

@MinhLe-pt7py Год назад

Thank you Sir! TNice tutorials helps alot !

@yuchenyea 8 месяцев назад

that's exactly what i need, thank you!

@youneshenni5417 2 года назад

Phenomenal video :) keep them coming.

@SteveBoyer10 2 года назад

Thank you for this! You are such a smooth coder, if that makes any sense :)

@lucke46 2 года назад

Great content! Keep up the good work.

@ramielwan48 2 года назад

Always like before watching because I know you dont disappoint

@Reactiive 2 года назад

Thank you Rami 😁

@alsetengineering3538 2 года назад

You are a super person. Tysm for this content. ❤❤

@ederrosa5909 Год назад

BEST TUTORIAL FOR ANIMATION EVEEEEEEEEEEEEEEEEEEEER!!!!

@FunwithIndra 2 года назад

Thank you So much for this wonderful tutorial..

@karakahya-bauunternehmen Год назад

Wooooooow very good. that was very good. i have learned a lot of new thing.

@eneseren8332 Год назад

Thank you so much for the tutorial

@aayush135 Год назад

Very good explanation ✨✨🙏🏻

@mohamedmoussa399 2 года назад

You are great man. Thanks 👍

@nejibafdhal5172 Год назад

Nice tutorial thanks

@AmanDeep-oo4nw 2 года назад

I love this ❤

@maldinidwiputra9374 Год назад

thanks you saved me

@erbolnurmanbetov 2 года назад

Great job!

@izuogufrancis5531 Месяц назад

Thank you so much.

@wevertonsantiago4305 2 года назад

Very nice! New subs here! Thanks for video!

@georgispeaking 2 года назад

Great work.

@kafelinux Год назад

you are the hero 🔥🔥🔥

@Sarev_ 2 года назад

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.

@abedzim5247 2 года назад

Thank you for the amazing work. Can you make one with the ScrollView in ?

@radomirmijovic2605 Год назад

Great video, thanks!

@Reactiive Год назад

Hi Radomir, thank you!

@lingarajsahoo3583 2 года назад

outstanding ❤️

@kiefer8101 Год назад

LIKED AND SUBSCRIBED!!

@kirank3368 4 месяца назад

Amazing content 🥰🥰

@AMITKUMAR-wy8ok Год назад

Thank you so much implemented it in my Live project love from India

@Reactiive Год назад

Glad to hear that! Thank you 🍻

@maan.patel.8808 Год назад

What a great video! Straight to the point and perfectly explained. Thanks for uploading tNice tutorials!

@saurabhs4743 Год назад

thank you so much

@sarcasticdna 2 года назад

🔥 🔥 🔥 Awesome

@harpalsinhjadeja5571 Год назад

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.

@rukmanaland Год назад

Thanks!!!

@truongngodang 2 года назад

Nice thanks bro

@josecoelho1018 2 года назад

Nice video thanks

@tonsantos21 2 года назад

Nice tutorial. Make more!

@arnolddevmode9603 2 года назад

i like it , very very cool,

@tgfrnds Месяц назад

brilliant

@YuriiLutsyk0304 Год назад

Amazing!!!!

@rosivancardoso8002 7 месяцев назад

Massa demais. Obrigado por compartilhar!!

@textual 2 года назад

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?

@filippobarcellos2944 2 года назад

Awesome video! Helped me a lot. How could I calculate the view of the content so it would be always related to the height of the current snap point?

@kennethlangdahlkrogstad2822 Год назад

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';

@francosbenitez Год назад

I love you guy.

@doom5786 Год назад

Thank you so much, this tutorial so great

@glaze4629 2 года назад

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

@MJ-vx5cz 2 года назад

I love your content 💙💙 Can you please do picker

@EquinoXReZ 2 года назад

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!

@avtandilshaburishvili4853 Год назад

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 ☺️

@mosdev1663 3 месяца назад

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 🫡

@Reactiive 3 месяца назад

What a feedback! Thank you so much 😁

@user-bx5hg8gf5k 2 года назад

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

@kangkoding3558 2 года назад

how if content has scrollview scrollview/flatlist how to handle the scroll ?

@lorenzotricarico4682 2 года назад

Fortissimo.

@katieveneziano2855 2 года назад

Exactly what I was looking for! If I'm getting a block container behind my bottomsheet (just a big white block) When I close it, what is that indicative of? Any idea how to remove it?

@QuanNguyen-ug5ln 2 года назад

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?

@bilelrahmouni01 2 года назад

thank you

@bodyguardmt2thp 2 года назад

Good Work and Tutorial!! I have a question: How can I put a background opacity and if I press on the background that the modal closed ?

@pixarfilmz4769 2 года назад

Hello, really great video, however, there is something I don't understand. If you remove the `withSpring()` inside `scrollTo` function, the `isActive()` ref doesnt work anymore, do you know why ?

@kakarnyori5457 Год назад

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); }

@Jim49267 10 месяцев назад

Can you make a second part of this video and tell us how to add the product to the Bottom Sheet? please

@shebeeradimaly6125 Год назад

thanks ..good

@deepanshu.770 2 года назад

Awesome video ❤️❤️ , Can we add a touchablewithoutfeedback in background of sheet to close it when touch outside

@AmjadOmari Месяц назад

great and clear, Thanks. But I have a small question, how can we handle the scrollView or Flatlist inside this custom bottomSheet?

@robertocandales08 2 года назад

Really interesting the video, I have a question, what happens if I want to leave a bottom space? to start above the tab navigation? I was trying to replicating with this approach but I could not get leave a bottom space, any idea?

@vighneshpathak9651 5 месяцев назад

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.

@cuongnguyen1230 2 года назад

That's great! So... How can I limit the BottomSheet position? I don't want to hide it from the screen.

@user-uk1bx9vm4o 2 года назад

Excellent , Now how do I add dark backdrop to this ?

@FrancescoVattiatoWhile 2 года назад

Very informative content here!

@amurfpv3492 2 года назад

@Reactiive what about Collapsible and expandable header ? Not a parallax one but more like it expands/collapses on either up or down direction.

@Reactiive 2 года назад

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).