React Native Modal [Day 4/30]

day 4 of #ReactNativeIn30Days

Modals are one of the most widely used components in mobile apps. React Native modals allows you to present content above an enclosing view.

Find out more about modals in React Native from their official documentation

The Modal

Surprisingly, using modals in React Native is quite easy and straight forward. Maybe it might be due to how well the documentation is written. To use modals in a react-native project, simply import the Modal component from the react-native library:

import {Modal} from 'react-native'

The next most important step is to trigger the modal to either open or close when an event happens. For example, we might want a modal to show when an onPress event is triggered on a button.

To do that, we will have to track the state of the modal by defining a useState() value for our modal

const [modalVisible, setModalVisible] = useState(false);

By default, the modal will remain closed until an event is triggered. We then set the modalVisible variable to true if we want to open the modal. Likewise, we will set the value of modalVisible to false if we want our modal to be hidden or closed.

For more information on how to use the Modal component in React Native, check out the official documentation.

What I Built for Day 4

For day 4, I expanded on day 2 and day 3 work by adding a modal to the vertical dotted menu icon. Once you press on the icon, a modal appears with a list of links(not functioning yet). You can close the modal by tapping on the dark background. Below is an image of the final result for day 4.

A modal component

Wrapping Up

Now, the modal component is not reusable. I’m planning on refactoring the code to make the modal reusable across the entire app for most cases.

Thank you for staying up till this point, see you on day 5! 😊

--

--

--

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Our experience with building a Naukri.com clone

My experience with TDD and how to implement it in a project.

Debounce in Js

Learn React by building a To-Do App — React Functionalities Explained

5 Alternatives to React Redux in 2020

Using Maven Archetype to Create New Applications Based on a Reference Architecture

Aggregated bowling score simulation with VueJS recursion

JavaScript Algorithms: Valid Parentheses (LeetCode)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Victor Bruce-Crabbe

Victor Bruce-Crabbe

A Frontend and Mobile Developer. I share my learning experience through writing based on what I will want to read when learning a new concept to help others.

More from Medium

From React to React Native, or There and Back

React + Native code = React Native

Technology React Redux

React library