React Native Modal

While working on a project, I wanted to use some modals. One that pops up as a menu with options on the bottom of the page, and another that pops up to show the completion of an action that the user takes. I thought I would write my experience down to help the next person.

Overview of sample code

Let us take it from the top.

<Modal></Modal>
The first thing is that a modal covers the entire page (ie its on top). A page on top of another page as you will.
<Modal transparent={true}> will make that overlaying page transparent but it is still there. A reason why you would want to make it transparent would be for my first use case. If you are making a menu appear on the bottom quarter of the screen you want to still be able to see the rest of the page.
Very important you should use visible as the method of making the Modal appear/disappear. You shouldn’t use a ternary or an if statement to do that.
Finally you can choose how the modal should appear with animationType (‘none’, ‘slide’ and ‘fade’).
<Modal animationType=’slide’ visible={modalVisible} transparent={true}></Modal>

On to the next step

This step is for when creating a menu on the bottom of the page.
<TouchableWithoutFeedback></TouchableWithoutFeedback>
I used the react-native-gesture-handler library for this, but you can use the regular react-native one if you like. The purpose for this component is to create the illusion that if you press ‘outside’ the Modal it closes.
<TouchableWithoutFeedback style={{height: ‘100%’}} onPress={() => closeModal()}></TouchableWithoutFeedback>

The Body of the Modal

Now is when you want to add the menu or whatever you are using the modal for. First add a <View></View> that will have your flex-box styling for the rest of the Modal. Only then start adding things to the body.

You’re done. I hope this was informative and helped you in your project. Happy coding!