How to reproduce iOS 11 maps bottom sheet with React Native

Question

Can anyone tell me how I can mimic the bottom sheet in the new maps app in iOS 11?

In android you can use a "BottomSheet", which mimics this behaviour, but I could not find anything like that for iOS.

Is that a simple scroll view with a content inset? So that the search bar is at the bottom?

I am fairly new to iOS programming so if someone could help me creating this layout that would be highly appreciated.

This is what I mean by "bottom sheet":

score 1 · Answer 1 · answered Aug 31 '18 at 05:47

I see this is old an question but for anyone struggling with this issue. you can use this module https://github.com/wix/react-native-interactable. Here is demo

score 0 · Answer 2 · answered Apr 28 '20 at 15:55

0

Maybe you could give a try to Modalize https://github.com/jeremybarbet/react-native-modalize I've been working on it to be able to create all kind of bottom sheets similar to that.

answered Apr 28 '20 at 15:55

jeremybarbet

score -1 · Answer 3 · answered Mar 01 '18 at 05:05

-1

It´s not called anything special, but some refer to it as "Card". Here is a great tutorial of how to implement the bottom card as Apple Maps.

answered Mar 01 '18 at 05:05

3 Answers3