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

Question

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:

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.

Burd

Answer 1

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>

Burd

presentationStyle is iOS-only. Is there something similar for Android? – Unaccountedfor

WARN: Modal with 'pageSheet' presentation style and 'transparent' value is not supported. – Unleavened

Answer 2

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}

Hydrophobia

WARN: Modal with 'pageSheet' presentation style and 'transparent' value is not supported. – Unleavened

statusBarTranslucent worked on android – Faxen

statusBarTranslucent worked on react-native with expo, presentationStyle isn't working – Feaster

Answer 3

The modal is not covering the entire screen The modal style applied by default has a small margin. If you want the modal to cover the entire screen you can easily override it this way:

<Modal style={{ margin: 0 }}>...</Modal>

Lucaslucca