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

Let’s create your first expressjs application with typescript

Let’s create your first expressjs application with typescript.png

Hello “Deno” in 2 minutes!

Lessons in learning: Javascript

10 Top VueJS Boilerplates for 2020

Receive and Parse a CSV file with NestJs — Part 1

Reactjs basic Concepts

Enyme Testing…RIP

Vanilla JS Testing — Part II

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

Brief Look at React Native

Refactor React Hooks : useReducer instead of useState

Input Field Autocomplete with React