CODEWITHSUNDEEP
react-nativemodal-dialog
Thingamajig
Thingamajig

Reputation: 4465

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

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.

Upvotes: 8

Views: 23271

Answers (3)

Virendra Mehar
Virendra Mehar

Reputation: 1

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>

Upvotes: 0

Saujan
Saujan

Reputation: 49

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}

Upvotes: 4

Thingamajig
Thingamajig

Reputation: 4465

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>

Upvotes: 7

Related Questions