#30daysofcode - Day5: Building a savings tracker application using React native.

Today I built a React Native modal, which will open a card that I can use to enter the information required to save a record (savings record).

To build the modal, import the following components into HomeScreen.js:

import { Alert, Modal, StyleSheet, Text, Pressable, View } from "react-native";

I will make use of a React Hook known as useState to declare state variables:

import React, { useState } from "react";

I will add a state variable that enables toggling of the visibility of the modal:

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

The full code :

  <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose ?={() => {
          Alert.alert("Modal has been closed.");
          setModalVisible(!modalVisible);
        }}
      >
        <View style={styles.centeredView}>
          <View style={styles.modalView}>
            <Text style={styles.modalText}>Hello World!</Text>
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress ?={() => setModalVisible(!modalVisible)}
            >
              <Text style={styles.textStyle}>Hide Modal</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
      <Pressable
        style={[styles.button, styles.buttonOpen]}
        onPress ?={() => setModalVisible(true)}
      >
        <Text style={styles.textStyle}>Show Modal</Text>
      
</Pressable>

The show modal Pressable, a core component wrapper that can detect various stages of press interactions on any of its defined children, will toggle the visibility of the modal from false to true and the modal will show. Clicking the hide modal Pressable will revert the visibility status to false once again, then hide the modal.

This will be a useful component in the near future as it will provide a way to interact with the application when adding and editing records.

The Result:

Before toggle:

When toggled:

That's it for day 5, the repo for this project can be found here. Stay safe and happy coding