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)
Modal. Here, Modal is the most important React Native component for this project.
useState. This is useful for the state variable
modalVisible. The initial value of
modalVisibleas added in
useStateis 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.
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
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
When the user clicks the button,
setModalVisible(false) is called which will, in hand, hides the modal from the user’s view.
create_btn. I am not explaining it further as you can see the styling parameters and the respective values attached to it.
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
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.