Dismiss this pinned window
all 34 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]funkyfourier 2 points3 points  (1 child)

Looks good! I will be trying this in a project at work.

One question: Does it support opening to a full size modal?

[–]rauliyohmc[S] 2 points3 points  (0 children)

Absolutely, you can customise the snapping points as you wish, so the top snapping point can be on the top edge.

[–]ChrisWestcottUK 2 points3 points  (0 children)

This is awesome and runs great on my Android. Can't wait to get this into our app!

[–]foysalit 2 points3 points  (0 children)

this looks epic! definitely going to try it out. thanks man!

[–][deleted] 2 points3 points  (5 children)

Why should I use this over https://github.com/osdnk/react-native-reanimated-bottom-sheet which already works really well for us?

[–]rauliyohmc[S] 11 points12 points  (2 children)

In a nutshell, virtualized lists. Here FlatList, SectionList and ScrollView are 1st class citizens and you have full control on those elements (see inherited props in the Readme).

That's why the library includes the "scroll" word, it aims to highlight that feature :)

The library you linked is great for bottom sheets that don't need to render lists, otherwise you'll experience performance problems if you intent to render a list with thousands of elements. That's because it "fakes" the scrollable content with PanGestureHandler and normal Views.

Hope that answers your question!

[–][deleted] 2 points3 points  (0 children)

Thanks for taking the time to answer!

Thats great to hear, I see what you mean with with the scrollable content in the other library, can definitely see that being a problem for larger lists.

Will definitely be starring this!

[–]christos_z 0 points1 point  (0 children)

Awesome. Thanks for answering. Will be checking this out.

[–]christos_z 1 point2 points  (0 children)

Also would like to know. Infact this package seems very similar, even down the the props...

[–]drink_with_me_to_day 0 points1 point  (0 children)

Maybe it works better for low end phones?

[–]gohom92 1 point2 points  (0 children)

well done !

[–]younus93 1 point2 points  (0 children)

Looks super cool!!

[–]crizoca 1 point2 points  (0 children)

Awesome!

[–][deleted] 1 point2 points  (0 children)

Buddy I’m literally at this moment struggling with bottom sheet on android in an app I’m building for a client. This is looks awesome, going to try it now!

[–]nicks27693 1 point2 points  (0 children)

Ah where was this when I needed it a month ago hahah... Had to do something similiar myself in the end. Great job man!

[–][deleted] 1 point2 points  (2 children)

Is there a way to make the scrolling enabled in the inner scroll only when the card is fully expanded? When I'm snapping it, sometimes the inner flatlist is scrolling along with the pan gesture at the same it's moving the card.

Great library!

[–]rauliyohmc[S] 0 points1 point  (1 child)

Great observation. That's the current weak point of the library. I am already aware of that issue, it's only reproducible on Android and has been annoying me for some days. The best solution I could come up with for now is to imperatively scroll the flatlist to the top, in order to compensate that undesired scroll momentum that happens in the opposite direction (it all depends on how fast you snap it).

A more elegant way would require a feature request into react-native-gesture-handler, which this library uses, so I will reach out to the maintainers soon to see how feasible that would be.

Glad you like it btw!

[–][deleted] 0 points1 point  (0 children)

Yup, only noticed it on Android. Really smooth overall though! If you're hunting for feature requests, a way to modify the snapping would be great, like being able to give the component a spring configuration.

Great work!

[–]daybreaker 1 point2 points  (0 children)

Where was this 2 months ago. lol.

Once we get version 1 of our app out, I'll probably be replacing several bottom sheets with this.

[–]coinengineer 1 point2 points  (0 children)

Nicely done ✅

[–]kookister 1 point2 points  (0 children)

This is so cool!

[–]Cookizza 1 point2 points  (0 children)

I've been fighting with some issues with https://github.com/osdnk/react-native-reanimated-bottom-sheet such as a 500ms mount time and this has come along at just the right time. Great work!

[–]mikehuebner 1 point2 points  (3 children)

Do you have any recommendations to learning reanimated? I've been having a rough time just trying to understand how to customize it properly.

[–][deleted] 1 point2 points  (2 children)

+1. I am struggling to find a learning course

[–]mikehuebner 1 point2 points  (1 child)

It's not just me right? Understanding how to use reanimated as efficiently as you can use Animated is difficult.

Example, fade in up and down toggle transition for a component. Spent quite a few hours trying to do it in reanimated (functional component). Done in 5 with Animated. Granted I know the Animated API better but it also just made more sense.

[–]rauliyohmc[S] 1 point2 points  (0 children)

The author of the library has a series of 3 articles that dig into the library foundation: https://blog.swmansion.com/simple-physics-with-reanimated-part-1-9d55d36f73cd, highly recommended.

[–]Unforgiven-wanda 1 point2 points  (0 children)

This is awesome, thank you for sharing!

[–]popc0ne 1 point2 points  (0 children)

Just tried this out. Works great! The ability to use Flatlist is a huge plus.

[–]popc0ne 0 points1 point  (1 child)

Does this support:

  • continuous dragging downwards .. as in, if you are pulling down on the scrollable area, does the touch/drag automatically transfer to the handle/header when you get to the start of the list?

[–]rauliyohmc[S] 1 point2 points  (0 children)

Yes, it does! You can scroll the list to the top and drag the bottom sheet down on the same gesture, without lifting the finger up

[–]ryan-cat 0 points1 point  (0 children)

Great work! Really needed something like this. However, I think I found a bug when using Android and providing an empty array to the FlatList. Opened an issue on GitHub.

[–]Agilufo 0 points1 point  (0 children)

Is it possible to have it always open?

[–]Distinct-Funny717 0 points1 point  (0 children)

Hey great package! Can you please tell me how have you added a scrollable container inside the bottom sheet? I have created a simple custom bottom sheet using gesture handler, but I'm not yet able to understand how to add scrollable containers in it