Use of modal component in React Native Tutorial

Modal view in your app can make the UI more engaging. It is a core component of React Native that you can use in your codebase to build a modal view. In this blog, we will learn about the steps to render a modal view interface. You will also get code snippets that will guide you as a reference.

Before going into the key segments, let’s learn about the utility of this component.

Utility of the Modal component

Modal is a view-based component that helps to enhance the UI of the app screen. It is embedded in another display. With this, you can enclose a screen containing the main content. You don’t need to worry whether it can be used on Android or iOS devices, you can use this React Native component for both OS.

While using a component, you need to be familiar with its child component and props. Let’s learn more about the props and child components of Modal. Although there are several props, we will discuss some of them.

hardwareAccelerated – This prop can be used only in Android OS. it decides if the hardware acceleration is required to be forced. The possible values that can be associated with this prop are either true or false.
Transparent – This is a prop of boolean type. It means that you can either set it to true or false. Also, it decides whether the modal will cover the complete view.
Visible – This is also a prop that falls under the boolean category. The default value of the Visible prop is true and it makes the modal visible to the screen.
animationType – in the updated version, you have to use animationType prop in place of animated. It determines the animation pattern of the modal view. It can be none, fade, or slide.
statusBarTranslucent – This is a prop of the boolean category. It decides if the modal view will be rendered under the statusbar.

Requirement of software installation

This section is about the prerequisites parameter that you should learn. You have to learn about the steps of software installation. The software is Node.js, Android Studio, and a code editor. Here, the code editor can be any based on your convenience. Here, I have used the Visual Code editor. After installing Android Studio, you need to configure the setup of android Studio. Services provided by the react native app development company can be availed only after this step of setup.

Here, we will be focusing on the software required for React Native CLI and not for Expo CLI.

So, get the Environment of React Native CLI and move forward with the following sections.

Building a React Native template

Now, you have to create a template for adding the codebase of the Modal view. Note, that you have to use the React Native framework to create this template. Follow the following steps for this task.

Create a folder with any name you prefer → run cmd from this folder execute command npx react-native init ModalView --version 0.68.1 → your template will be built.

It’s time to frame the codebase.

Building the program (codebase)

In image 1, the code imports the required components from libraries: react-native and react. You need useState, StyleSheet, View, Text, Image, Dimensions, TouchableOpacity, and Modal. Here, Modal is the most important React Native component for this project.

The code snippet in image 2 introduces the key function for creating the modal view. It further uses the React Native hook useState. This is useful for the state variable modalVisible. The initial value of modalVisible as added in useState is false. This means that initially, the modal view will not be visible.

The code attempts to show an image with text.

The code starts with a return function and it holds the container under the View component, a text element “create Modal” under the Text component, and an image under the React Native Image component. All three elements (View, Text, and Image) have some styling parameters attached to them.

You can put different images by adding a different image source to it. The image source will be pulled from the given URL when the app loads in the browser or on mobile devices.

The code starts by introducing a TouchableOpacity with the style of create_btn. It will create the button.

The onPress prop will be called when the user clicks on the button.

Inside, there is a Text element that will show “Open Modal” and then a View element that will be displayed if modalVisible==true.

The code will also create a new Modal object with animationType set to slide and the value of transparent as true, so it’s not visible until modalVisible is true.

The code creates a modal view that contains the text “Hello World!”

The code renders the Modal view a style with styles.modal_btn. It sets its background color to white and gives it an opacity of 0.5. Using touchableOpacity, it creates the button with the text element “Button”.
This button is linked with another onPress prop handler. It uses the ID styles.modal_btn.

When the user clicks the button, setModalVisible(false) is called which will, in hand, hides the modal from the user’s view.

The snippet of image 6 is about designing the overall app with a modal view in it. You have to use the StyleSheet for this. Firstly, I have considered Container and Modal_text. Consider the styling parameters used with these objects.

It is about the object: image and create_btn. I am not explaining it further as you can see the styling parameters and the respective values attached to it.

You can notice how I have styled the btn_text, FullBack_width, and Modal_box. One thing I want to focus is that you can use ‘Dimensions’ and ‘percentage’ methods for the responsiveness of the modal screen.

Lastly, you have to consider modal_btn.

Testing the Modal view on the emulator

As we are done with the program-building process, we have to test the app. Let’s do this step and complete the project.

For this, open the cmd from your ModalView template (stored in your local drive in your system)
→ run npm install
→ npx react-native run-android

This will enable your emulator. You will get the view on your emulator as shown in image 10.