How to create your first modal popup for your React-Native app

For many of my React-Native projects I like to create popup modals which contain extra information about the item that I either click or long-click, there is a very good package simply called “react-native-modal” which I use a lot for this functionality. So I thought since I have written an article in a while I would do a tutorial on how to create a modal for your react native application and add a few nice things to it to make it look presentable. Let’s get to it!

So firstly as always we will need a react native application, so navigate to wherever you want your react native app to be in your terminal, I usually use the Downloads or Documents folder on Mac and enter the command.

react-native init mymodalapp

This will then begin to create the necessary files we need to start developing a cool react-native app! Including the ios and Android project files and folders.

Once this has finished creating open the project in your favoured text editor, mine is visual studio code.

Once you have opened the project, we will want to install a package called “react-native-modal”, to do this enter the command

npm install react-native-modal

This will then begin installing, I prefer using “react-native-modal” instead of the out of the box modal from react-native because of its ease of use, animation functions as well as the swiping capability.

Once this has finished installing, in your App.js please the “App” const or class depending on what version of React-Native you are using with the below code.

class App extends React.Component {
render(){
return(
<View>
<View style={{marginTop:50}}>
<TouchableOpacity>
<Text style={{textAlign:'center'}}>Click to open the modal</Text>
</TouchableOpacity>
</View>
</View>
)
}
};

Our main page will be a simple touchable area of the screen that will open the modal.

Next we will import the modal component from the “react-native-modal” package by entering the command at the top of the App.js page (it doesn’t have to be right at the top of the page, just at the same section of the page where the rest of the import statements occur)

import Modal from 'react-native-modal';

Once you have written this create a state object and input a key of “isModalVisible”, one of the props that the “Modal” component takes in “react-native-modal” is “isVisible” and is a boolean value, if the value is true, then the modal is shown on the screen, else if it is set to false then it is hidden.

So your state object should look like the below

state = {
isModalVisible:false
}

Add the below code inside of the containing “View” tag as well.

<View style={{marginTop:50}}>
<TouchableOpacity>
<Text style={{textAlign:'center'}}>Click to open the modal</Text>
</TouchableOpacity>
<Modal isVisible={this.state.isModalVisible}>
<View style={{ flex: 1 }}>
<Text>This is the modal content for now!</Text>
</View> 
</View>
</Modal>
</View>

Here we have a “View” container which has a “TouchableOpacity” that will be used to show the modal after clicking on the piece of text inside of the “TouchableOpacity”. In addition, you will see that I have implemented a modal with one text tag and set the “isVisible” prop equal to “this.state.isModalVisible” so when the state “isModalVisible” is set to true, by say a method, then the modal will show on the screen.

So the next step is to actually get the modal to show, so we will create a basic function that sets the state object key “isModalVisible” to true when we click the text inside of the “TouchableOpacity”. The code for this is below.

openModal = () =>{
this.setState({
isModalVisible:true
})
}

Once you have written this code you will need to make sure this method runs on the click event of the text press, so you will need to alter the “onPress” event of the “TouchableOpacity” to the below.

<TouchableOpacity onPress={()=>this.openModal()}>
<Text style={{textAlign:'center'}}>Click to open the modal</Text>
</TouchableOpacity>

This will ensure the function will not run when the component has been loaded.

Once you have added this, run your application and click the text.

You will see that the modal shows but it has a black background and is barely visible.

You can change this by altering the “backgroundColor” style of the modal tag like below.

<Modal isVisible={this.state.isModalVisible} style={{backgroundColor:'white'}}>

However, you will now see that the white background lasts the length of the screen, sometimes you may not want that so to shorten the height of the modal you can use the “maxHeight” style property of the “Modal” tag like below and set it to what ever you like.

maxHeight:300

If you wanted the modal to be half of the screen you could import the “Dimensions” component from “react-native” and set the maxHeight property to the below. This will get the height of the window of the screen and divide it by 2.

maxHeight:Dimensions.get('window').height / 2

For now we will also make an adjustment to the text and view inside the modal, firstly, add

justifyContent:'center'

to the view inside of the style tag in the modal, secondly add

textAlign:'center'

to the text tag inside of the view which is inside the modal.

One of the main functionalities that bootstrap helped implement is the ability to close a popup by clicking on the outside of it, you can also do this with “react-native-modal” with the “onBackDropPress” prop.

To do this we will create another method where we set the “isModalVisible” state key to false, meanwhile, instead of having these 2 methods we could join them into one and do it like this.

toggleModal = () =>{
this.setState({
isModalVisible:!this.state.isModalVisible
})
}

Since it is a boolean value the “toggleModal” function will set the state to the opposite of what it currently is, so this is useful if the modal is open and we want to close it or if the modal is closed and we want to open it.

However, for now we will just stick to 2 methods, so to implement the “onBackDropPress” we need to create the below method which sets the state to false.

closeModal = () =>{
this.setState({
isModalVisible:false
})
}

We then need to run this method on the event of the “BackDropPress” prop of the “Modal” tag like below.

onBackdropPress={()=>this.closeModal()}

Once you have added this to the “Modal” tag, test it out by opening the modal and clicking outside of it, the modal should now close when you click outside of the content.

One of the cool functionalities of the “react-native-modal” package is the ability to close the modal with a swipe gesture instead of clicking a button, this is easily implemented and much the same as the “onBackdropPress” prop, you will need to add the “onSwipeComplete” prop which is a prop that takes a value like a function to run after a user has swiped the modal, furthermore, you can set the direction of the swipe with the “swipeDirection” prop of the Modal tag which can be set to “up”, “down”, “left” or “right”. Below is an example of how to do it.

swipeDirection="right"

Furthermore, with the modals at times you may want them to animate when transitioning into or out of the screen, once again, the package makes it incredibly easy to do this. There are 2 props “animationIn” (The animation that occurs when the modal is coming into the screen) and “animationOut” (The animation that occurs when the modal is coming out of the screen).

AnimationIn can be set to “slideInDown”, “slideInUp”, “slideInLeft” and “slideInRight”, whereas, AnimationOut can be set to “slideOutLeft”, “slideOutRight”, “slideOutUp” or “slideOutDown”.

For now I shall set my “animationIn” and “animationOut” props to the below.

animationIn="slideInUp" animationOut="slideOutDown"

I also added a bit more code in my own time so your modal has 2 elements that are taking up equal widths at the bottom of the modal which is a common design among popups. Below is now my updated render method in full.

render(){
return(
<View>
<View style={{marginTop:50}}>
<TouchableOpacity onPress={()=>this.openModal()}>
<Text style={{textAlign:'center'}}>Click to open the modal</Text>
</TouchableOpacity>
<Modal animationIn="slideInUp" animationOut="slideOutDown" onBackdropPress={()=>this.closeModal()} onSwipeComplete={()=>this.closeModal()} swipeDirection="right" isVisible={this.state.isModalVisible} style={{backgroundColor:'white',maxHeight:Dimensions.get('window').height / 2}}>
<View style={{ flex: 1,justifyContent:'center'}}>
<Text style={{textAlign:'center'}}>This is the modal content for now!</Text>
</View>
<View style={{ flex: 1,justifyContent:'center',position:'absolute',bottom:0}}>
<View style={{flexDirection:'row',}}>
<TouchableOpacity style={{backgroundColor:'green',width:'50%'}}>
<Text style={{color:'white',textAlign:'center',padding:10}}>Ok</Text>
</TouchableOpacity>
<TouchableOpacity style={{backgroundColor:'red',width:'50%'}} onPress={()=>this.closeModal()}>
<Text style={{color:'white',textAlign:'center',padding:10}}>Cancel</Text>
</TouchableOpacity>
</View>
</View>
</Modal>
</View>
</View>
)
}

Apologies for the simplicity of this tutorial I am trying to get back into the swang of this article writin’ thang!

Bare with me while I get my mojo back and I write articles more consistently over the festive period, but thank you to everyone that has been viewing and clapping my previous articles, it’s very much appreciated!

Merry Christmas and Happy holidays! x