React Native Alert/Modal Position

 React Native Alert/Modal Position

How do you dynamically place Modal/Alert at top/bottom/center of your screen?

Example: 

Step1: Place an image that fits the whole screen.

Step2: Place a button at the footer that updates the modal position 

Step3: Place a Modal and change the position each time the button is clicked

Solution:

Step1: Place Image to fit to the whole screen providing flex:1 and resizeMode: "cover". 

Step2: Store the positions as in the code and place a button at footer of the screen, on pressing the button pass the Modal position stored at the top in the function in order to view the modal at respective positions on the screen as such top/center/bottom.

Step3: Place a Modal below the Image View or the View where you need to overlay the Alert and render the visibility, style params from the variable predefined and updated in the function.

All set to overlay the alert and change its position on button click. Find the same in the code below

Stay tuned to my posts  and do share your valuable thoughts if any queries or you would like to share anything on this topic in the comment section and please do like and share my post if this was helpful.

Hope this helped you!!