Add a separate stack navigator for the modal screen

In this section, we’ll create a modal screen that will allow app users to create a new chat room. Later in this tutorial, we’ll store the name of the chat room in the Firestore collection.

A modal screen displays content that temporarily blocks interactions with the main view. It’s like a popup and usually has a different transition in terms of how the screen opens and closes. This mode of the screen is generally used to display one specific piece of information.

Here’s a flowchart to help visualize the navigation flow we’re trying to achieve by the end of this section.

Start by creating a new screen file called AddRoomScreen.js inside the src/screens directory with the following content:

Right now, focus on adding this modal screen to the home stack navigator, rather than its contents.

Also, add a temporary button to open the modal screen in the HomeScreen.js file.

Now open the src/navigation/HomeStack.js file. In order to keep the modal as a separate route from the other home stack routes (such as HomeScreen ), let’s create two new stack navigators in this file.

Start by importing the modal screen with the rest of the routes and create two new stack navigator instances. You can give a custom name to each instance:

From the snippet, the ChatAppStack is going to contain those screens routes that don’t require the use of a modal screen and focus only on the chat app features:

The modal stack is going to wrap both the ChatAppStack and the modal screen as routes. Modify the exported HomeStack as shown below. Make sure to set the mode of ModalStack.Navigator to modal and headerMode to none :

Go to the simulator. You’re going to find the Add room button on the home screen, as shown below:

Click on the button, and notice the transition when the modal screen pops up:

How to add an icon in the header bar

The modal stack is working as per our requirements. But the way the user would navigate from the home screen to the modal is not by clicking a button in the center of the home screen. This action is going to be done by clicking an icon button from the header.

Luckily, the react-navigation library provides props for us to implement this action without any hassle. Import IconButton from the react-native-paper UI library inside the file src/navigation/HomeStack.js :

Then add an options prop with a function, such that you’re able to pass a navigation prop reference. Add the following code to the HomeScreen route:

Also, remove FormButton in HomeScreen.js you create in the previous section.

Here’s how the home screen in the simulator should look after this step:

Complete the modal screen

Right now, the modal screen just displays a line of text and a close button, but the real functionality this screen will provide is to allow the user to enter the name of the chat room using an input field. Then, using a form button, the chat room name will be added to a Firestore collection.

Open the AddRoomScreen.js file and start by modifying the import statements:

Then, to add a chat room, define a state variable called roomName inside a functional component AddRoomScreen .

To modify the JSX returned from this component, make sure to add a close button in the right corner of the screen—using custom components, we can add the input field as well as the submit button.

Don’t worry about the handleButtonPress method on the onPress prop for FormButton . This is going to execute the Firestore query—that’s what we’ll be doing next.

The corresponding styles of the above components are defined as below:

If you go to the modal screen, you’ll get the following result:

Here is the complete flow of the HomeStack navigator so far:

The Create button will remain disabled unless the user starts typing.