{"id":4221,"date":"2021-08-16T06:39:00","date_gmt":"2021-08-16T10:39:00","guid":{"rendered":"https:\/\/cindypotvin.com\/?p=4221"},"modified":"2021-08-13T21:51:32","modified_gmt":"2021-08-14T01:51:32","slug":"how-to-close-a-react-native-modal-with-a-button","status":"publish","type":"post","link":"https:\/\/cindypotvin.com\/how-to-close-a-react-native-modal-with-a-button\/","title":{"rendered":"How to close a React Native modal with a button"},"content":{"rendered":"
\n
\n

I’ve been working with React Native lately, and I’ve 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’t promise more features than that, but it can be very useful to implement your own popup.<\/p>\n\n\n\n

On the other hand, since it’s 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’ll be walking you through how to add those two features when you’re starting from a Modal <\/em>component.<\/p>\n\n\n\n

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

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

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

Let’s 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\n\n

\nimport 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});\n<\/pre>\n\n\n\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\n\n\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’t have one to test).<\/p>\n\n\n\n
Pressing the button calls the function specified in the onRequestClose<\/em> prop of the modal, so let’s change the state to hide the popup when it is pressed, which will show the main screen of the application : <\/p>\n\n\n
\n<Modal\n  visible={modalVisible}\n  onRequestClose={() => setModalVisible(false)}>\n<\/pre>\n\n\n\n
How to add close button to a React Native modal<\/h2>\n\n\n\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.<\/p>\n\n\n\n
Given how the positioning work, there are two options for this:<\/p>\n\n\n\n