How can I achieve an 'almost' full screen modal in React Native?

user_1604072 0
Viewed 9192

I'm not sure what you call this type of modal, but one that is trendy on iOS that doesn't quite make it full screen, maybe it's 10% margin from the top. Here's an image:

enter image description here

Here's my standard Modal setup:

<Modal visible={imageViewerVisible} transparent={true} onRequestClose={() => this.setImageViewerVisible(false)} style={{ backgroundColor: 'black'}}>
      <ImageViewer imageUrls={ images } index={0} onSwipeDown={() => this.setImageViewerVisible(false) } enableSwipeDown={true} />
</Modal>

I'm not sure if there's a prop I can use or it might not be the native react-native modal? Not even sure what people are calling this type of modal! Thanks in advance.

react-native modal-dialog
2 Answers

This is just called presentationStyle!

Adding the prop presentationStyle="pageSheet" does the trick.

<Modal presentationStyle="pageSheet" visible={imageViewerVisible} transparent={true} onRequestClose={() => this.setImageViewerVisible(false)} style={{ backgroundColor: 'black'}}>
      <ImageViewer imageUrls={ images } index={0} onSwipeDown={() => this.setImageViewerVisible(false) } enableSwipeDown={true} />
</Modal>
user_16040720

The presentationStyle prop controls how the modal appears (generally on larger devices such as iPad or plus-sized iPhones) so for Android we can use statusBarTranslucent which determines whether our modal should go under the system statusbar.

 <Modal
  statusBarTranslucent={true}
  animationType="fade"
  transparent={true}
user_175471280
Related