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