Backdrop interaction required

[jeremyben-meir]

Does anybody have any good alternatives or recommendations, given the following requirement:

I want to be able to interact with a map, in the backdrop of a panel that slides up. The panel that slides up should then adjust its draggable range based on the number of results returned from a fetch.

Thank you.

[kathawala]

Not sure about adjusting the draggable range based on the results returned from a fetch. Do you mean, if the fetch returned one result then your panel would look like this:

 _____________________
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
|---------------------|
|     Panel           |
|                     |
|                     |
 _____________________

And if your fetch returned double the results your panel would look like

 _____________________
|                     |
|                     |
|                     |
|                     |
|---------------------|
|     Panel           |
|                     |
|                     |
|                     |
|                     |
|                     |
|                     |
 _____________________

If that is what you mean, you'll be able to do it with this library for sure, you can dynamically adjust the panel height and dynamically lock the panel (i.e. prevent dragging). I think that will provide what you want.

[DanieleSalatti]

I'm kinda having the same problem...new to React Native so I might be missing something, but how do you make it so that the backdrop doesn't cover the map? Even if transparent, I cannot click through it

[jeremyben-meir]

I'm kinda having the same problem...new to React Native so I might be missing something, but how do you make it so that the backdrop doesn't cover the map? Even if transparent, I cannot click through it

I found a solution... passing in the prop showBackdrop=false should fix the interaction issue.

I needed a solution that did not display over every view, but rather a panel that acted as a subview (so that more than one could display at a time, theoretically). For this functionality I used reanimated-bottom-sheet (link here), which works in a very similar way. With this component, interaction with the backdrop is the default functionality.

Hope that helps!

Also, thank you @kathawala! That works--if the fetch results in a view that exceeds the size of the page, though, I would be interested in scrolling through them. I would ideally be able to close the window by scrolling down upon reaching the top of the results.

[kathawala]

@jeremyben-meir you can do the same thing as the example in that component with this one, I myself have done it in several projects. I also wrote a tutorial on how to do it with this component. Glad you found something that works though!

EDIT: actually looking at what you wrote I know what you're trying to do. I've done exactly the same thing myself, with a scrollview inside the panel and closing the panel when you drag from the top of the scrollview. I wrote about it here: https://www.farhansayshi.com/post/sliding-up-panel-in-react-native/

Cheers!