Use the React Native Modal Component with React Navigation

Instructor: [00:00] To begin, we're rendering two screens, a Home and Details screen. Each one of these has a button in which we can go to the Details screen and we can open up the Modal from each screen once it's set up. These are being rendered via StackNavigator coming from React Navigation, and I'll just set some basic navigation options of Title.

[00:18] Now if we want to use the core React Navigation and Component of Modal to render a Modal, what we're going to do is set up a new class of app which will extend React.Component. Inside of here, we're going to set some initial state of modalVisible set to false.

[00:37] We're then going to create a new method called ChangeModalVisibility. We're going to give that one argument of modalVisible, and I'll set the default value for that to false. Then inside of this method, we'll say this.setState, and I'll change modalVisible.

[00:54] Next, we'll go ahead and set up our render function, and before we do that we're going to import a few things from React Native. We'll import the View, Modal, Style Sheet, and Text. Before we go writing anymore code, I'm just going to paste in a few pieces of styling information.

[01:11] We've got a Modal container which is just going to allow us to take up the entirety of the screen that the Modal's rendered in, and then a Modal body which will actually surround the content that we want to render inside of our Modal.

[01:23] Now inside of our render, we'll set up our Return, and we're going to have a containing View with a style equal to Flex One, just to ensure it takes up the entirety of the space it's given. We're then going to render our main apps Stack and replace our export default with just app.

[01:38] With everything rendering in the same way, we can go ahead and start rendering our Modal and to do that we'll set up our Modal component. Inside of there, we'll set a SafeAreaView.

[01:48] Inside of our SafeAreaView, we're going to render a View with a style of styles.modalBody. We'll render some text, and we'll render a button. In this button, we're going to call the this.ChangeModalVisibility function, and we'll pass an argument of false to close the Modal.

[02:07] Before we move on, we need to set the style for our SafeAreaView, and we're going to set that to styles.modalContainer. We're also going to pass a few props to our Modal component, the first of which is going to be visible. That's going to be equal to this.state.modalVisible.

[02:24] We're also going to specify the animation type that should be used. In this case, we're going to use the animation of fade. We can now go ahead and, using screenProps, pass our function of ChangeModalVisibility down to any children components and screens.

[02:40] Using ChangeModalVisibility and looking inside of our screens, what we can do is actually access our screenProps as another prop inside of any component that has been registered with the navigator.

[02:50] Using screenProps, we can then go ahead and replace our onPress and say screenProps.ChangeModalVisibility. In this case, we want to pass an argument of true. We'll do the same for both the Home screen and the Details screen.

[03:04] Now when we press Go To Modal, you can see a Modal fade in, and when we press Close Modal, it will fade out. We can do the exact same thing from our Details screen once we import our screenProps prop.

[03:15] Now when we go to Details, we can open our Modal, close our Modal, and do the exact same thing on the Home screen.