Add a Modal Screen that Pops Up from the Bottom with React Navigation
We’ll use React Navigation to add a modal screen to our app, which will pop up from the bottom, and cover the entire screen.
Instructor: [00:00] Import TouchableOpacity into restaurant-info.js. Add a button that can add a review for the restaurant. We'll use the same styles that we used on the restaurant row for the button.
[00:18] When we reload, we have an add review button. We want it to pop up a screen so that we can add a review. In app.js, we want to make a new modal screen, but we can't make it in the restaurant stack navigator because that stack navigator is within the tab navigator.
[00:36] We want the modal to pop over everything, including the tabs. We actually have to make a new base stack navigator. We'll set our tab navigator to a const and make and export a new stack navigator.
[00:51] The first screen of that navigator will be the tabs. We'll specify this as a modal stack navigator by setting the mode to modal. We'll also set the header mode to none so that we don't get a header on the top of our tabs.
[01:08] Then, we can make a new component that we'll use for the modal screen, called add-review.js. We can import that into app.js and set it as a screen in our new modal stack navigator.
[01:29] Now, on the add review button in restaurant info, we can add an onPress action and make that function, which will navigate like normal to the new add review screen. The restaurant info screen isn't in the same stack navigator as the add review screen, but React navigation will walk up the navigation stack to look for it. It can still navigate there.
[01:56] When we reload, we can go to the info and press the button to add a review. On iOS, we can drag down from the top to dismiss the modal, but let's also add an X button that we can use to close the modal.
[02:10] First, if we want to, we can turn off that drag-down-to-close gesture in app.js by adding navigation options to the modal stack navigator options and setting gestures enabled to false.
[02:23] Then, in the add review component, we can import icon and add a close button and some styling. Then we can specify an onPress for the close button. To actually close the modal, we can call the goBack function on the navigation prop. When we reload, we can open the modal and close it with the close button.