Example of presentationStyle in Modal in React Native

Hello friends, In today’s tutorial we would learn about presentationStyle prop of Modal component in react native. The presentationStyle is a iOS only prop and does work only in iOS devices. It is used to control How Modal will appear in a large size devices like iPad or Plus devices. Using the presentationStyle we can control Modal appearing look in iOS. It supports 4 types of values we would learn about them one by one. So in this tutorial we would learn about Example of presentationStyle in Modal in React Native.

Contents in this project Example of presentationStyle in Modal in React Native :-

1. Open your project’s main App.js file and import Button, Modal, SafeAreaView, StyleSheet, Text, View and useState component.

2. Creating our main App component.

3. Creating a State named as isVisible to show and hide the Modal component.

4. Creating return() block, Here we would make Modal component and Button to show the modal component. As you can see in the below code we’re using presentationStyle prop.

Explanation :-

  1. presentationStyle=’fullScreen’ :- Cover the screen completely when modal is being displayed.
  2. presentationStyle=’pageSheet’ :- Cover portrait width view centered only in large size devices.
  3. presentationStyle=’formSheet’ :- Cover narrow width view centered only in large size devices.
  4. presentationStyle=’overFullScreen’ :- Cover the screen completely but it allows transparency.

Note :-

  1. fullScreen if transparent={false}
  2. overFullScreen if transparent={true}

5. Creating Style.

6. Complete Source Code for App.js File :-

Screenshots :-

Example of presentationStyle in Modal in React Native

Leave a Reply

Your email address will not be published. Required fields are marked *