Quantcast
Channel: Active questions tagged react-native+ios - Stack Overflow
Viewing all articles
Browse latest Browse all 16750

How to make the iOS bottom-sheet panel of Maps in react-native?

$
0
0

I am developing a react-native app. I'm trying to make a UI element similar to the one on Maps in iOS, in which you can slide a panel from the bottom. The behavior of the list is quite complicated as:

  • You can't scroll down the list until the panel is fully open.
  • Trying to scroll it down makes the panel go up, and then if you continue the sliding movement on the screen the list starts scrolling.

And of course:

  • You can't slide the panel down until the list is at the beginning.
  • If you try to slide the panel down and the list isn't fully scrolled up, you end up scrolling the list to the beginning and then pulling the panel down.

The list scrolling up or down and the panel moving up or down has to be made in one movement. The user doesn't have to pull his finger out of the screen to make the second action. This is the actual hard part. Furthermore, it has to work on iOS and Android.

An example GIF of the iOS panel and the expected behavior.

The perfect module would be something like this, but the list is still scrollable even when it has reached the top: https://github.com/donaldmorton/react-native-bottom-drawer

I tried with this module without success: https://github.com/simonhoss/react-native-touch-through-view

Something like that in react-native would be perfect: How can I mimic the bottom sheet from the Maps app?

I already checked this post: React Native slide out panel and scrollview

Any kind of help is welcomed, thank you!


Viewing all articles
Browse latest Browse all 16750

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>