{"id":111141,"date":"2021-08-27T07:00:00","date_gmt":"2021-08-27T04:00:00","guid":{"rendered":"https:\/\/www.javacodegeeks.com\/?p=111141"},"modified":"2021-08-20T12:45:08","modified_gmt":"2021-08-20T09:45:08","slug":"how-to-close-a-react-native-modal-with-a-button","status":"publish","type":"post","link":"https:\/\/www.javacodegeeks.com\/2021\/08\/how-to-close-a-react-native-modal-with-a-button.html","title":{"rendered":"How to close a React Native modal with a button"},"content":{"rendered":"

I\u2019ve been working with React Native lately, and I\u2019ve come across a few unimplemented features I needed to add to the basic components. One of those components is the React Native Modal <\/em>component that is used to show a view above another one. It doesn\u2019t promise more features than that, but it can be very useful to implement your own popup.<\/p>\n

On the other hand, since it\u2019s only a simple modal, it does not include everything you would expect for a popup component like an X to close it, or closing the modal when you tap beside it. I\u2019ll be walking you through how to add those two features when you\u2019re starting from a Modal <\/em>component.<\/p>\n

If you\u2019re in a hurry, you can also find the final result on my GitHub: https:\/\/github.com\/CindyPotvin\/react-native-popup<\/a><\/p>\n

\n
\"\"<\/a><\/figure>\n<\/div>\n

How to close a modal<\/h2>\n

Let\u2019s start with a basic App.js <\/em>that shows a popup. I also added a few styles to have a shadow so the popup is visible, and a generous amount of margin so we can test closing the popup by clicking beside it later.<\/p>\n

import React, { useState } from 'react';\nimport { StyleSheet, Modal, Text, View } from 'react-native';\n\nexport default function App() {\n  const [modalVisible, setModalVisible] = useState(true);\n\n  return (\n    <View style={styles.container}>\n      <Text>Open up App.js to start working on your app!<\/text>\n      <Modal visible={modalVisible}>\n        <View style={styles.modal}>\n          <Text>\n            Popup content.\n          <\/Text>\n        <\/View>\n      <\/Modal>\n    <\/View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: \"white\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n  },\n  modal: {\n    flex: 1,\n    margin: 50,\n    padding: 5,\n    backgroundColor: \"white\",\n    shadowColor: \"black\",\n    shadowOffset: {\n      width: 0,\n      height: 2,\n    },\n    shadowOpacity: 0.25,\n    shadowRadius: 4,\n    elevation: 5,\n  },\n});<\/pre>\n
The Modal <\/em>is displayed according to its visible<\/em> prop. Right now, the value in the state is always true, so the popup will always be visible.<\/p>\n
Even without a button or another way to change the state, the Modal <\/em>can be closed on Android with the back button (the menu button on Apple TV should have the same effect according to the documentation, but I don\u2019t have one to test).<\/p>\n
Pressing the button calls the function specified in the onRequestClose<\/em> prop of the modal, so let\u2019s change the state to hide the popup when it is pressed, which will show the main screen of the application :<\/p>\n
<Modal\n  visible={modalVisible}\n  onRequestClose={() => setModalVisible(false)}><\/pre>\n
How to add close button to a React Native modal<\/h2>\n
First, we have to add the button itself so we can then use it to close the popup. In that case, I wanted to add a small X in the top right corner of the popup, but it could be anywhere else.
 
<\/div> <\/div><\/p>\n
Given how the positioning work, there are two options for this:<\/p>\n