React Native Modal [Day 4/30]
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.
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! 😊
