283 reads

React Native Car Parking Finder App UI Clone #6: Implementing Modal View

by AbsekNovember 11th, 2019

Too Long; Didn't Read

This tutorial is the sixth part of our React Native Car Parking App UI clone series. The motivation for this tutorial series came from the React Native App Templates that provides us with a dynamic, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup. In this part of the tutorial series, we are going to implement a Modal that displays extended information of the parking card section with different UI sections. The idea is to install the react-native-modal package and integrate it into the map screen. We will implement different sections inside the Modal view and style them.

Company Mentioned

featured image - React Native Car Parking Finder App UI Clone #6: Implementing Modal View

This tutorial is the sixth part of our React Native Car Parking App UI clone series. In the last part, we successfully implemented the Header section in our map screen as well as organized our code. In this part of the tutorial series, we are going to continue from where we left off in the last part. So, it is recommended to go through all the previous parts of this tutorial series in order to get the full insight and development of the project.

As mentioned in the previous parts, the motivation for this tutorial series came from the React Native App Templates that provides us with a dynamic, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup. And, this sixth part is also the continuation of coding implementations and designs from the YouTube video tutorial by React UI Kit for the Car parking Finder App UI clone. The video tutorial seems to deliver the implementations of different UI sections using a fast coding style that may be difficult to understand for any developer especially the beginners. However, this tutorial gives step by step guidance on the implementation of each UI section. Hence, the readers can relax and take time to learn and implement the UI.

Overview

In this sixth part of the tutorial series, we are going to implement a Modal that displays extended information of the parking card section with different UI sections. The idea is to install the react-native-modal package and integrate it into the map screen. Then, we are going to configure the Modal in order to make it look like in the actual app. Lastly, we will implement different sections inside the Modal view and style them.

So, let us begin!!

Installing Modal Package

Here we are going to install the react-native-modal package into our project. This package provides an enhanced, animated and customizable react-native modal. The main aim of this package is to is expanding the original react-native

Modal

component by adding animations and styles customization options while still providing a plain-simple API. Now in order to install this package into our project, we need to run the following command:

expo install react-native-modal

Then, we need to import this package as Modal component in the Map.js file as shown in the code snippet below:

import Modal from 'react-native-modal';

Implementing modal

In this step, we are going to implement the modal into our Map screen. For that, we need to define a state called activeModal in order to handle the opening and closing of the modal. The activeModal should be defined as shown in the code snippet below:

state = {
    hours: {},
    active : null,
    activeModal : null
  }

Now, we need to activate the modal when pressing the buy button on our parking spot card. For that, we need to change the state of activeModal in the onPress event of

TouchableOpacity

component as shown in the code snippet below:

   <TouchableOpacity style={styles.buy} onPress={() => this.setState({ activeModal: item })}>
                  <View style={styles.buyTotal}> 
                    <Text style={styles.buyTotalPrice}>${item.price *2}</Text>
                    <Text style={{ color : theme.COLORS.white}}>{item.price}x{hours[item.id]} hrs</Text>
                  </View>
                  <View style={styles.buyButton}>
                    <Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text>
                  </View>
              </TouchableOpacity>

Here, we have just implemented a trigger to open the modal but have not implemented the actual

Modal

component yet. So now, we are going to implement the actual modal.

Defining a new function for modal

Here, we are going to define a new function called renderModal(). This function will return the template with the

Modal

component. The overall implementation of this function is provided in the code snippet below:

renderModal(){
     const {activeModal} = this.state;
     if (!activeModal) return null;     
     
     return(
       <Modal
        isVisible
        onBackButtonPress={() => this.setState({ activeModal: null })}
        onBackdropPress={() => this.setState({ activeModal: null })}
       >
         <View style={styles.modal}>
           <Text>{activeModal.title}</Text>
         </View>
       </Modal>
     )
   }

Here, inside the renderModal() method, we have defined activeModal constant from the state variable. Then, if the activeModal state is empty then the renderModal() function will return null which will not show the

Modal

on the app screen. However, if the activeModal state is not empty, the function will return the template with

Modal

component. The

Modal

component here is configured with different props.

The isVisible prop is used to show the modal on the screen. In the onBackButtonPress and onBackdropPress events of the

Modal

component we have changed the activeModal state to null in order to hide the

Modal

from the screen. We have also integrated some

View

component wrapping Text component with some inline styles.

Now, we need to call the renderModal() method in the render() function of our

Map.js

file as shown in the code snippet below:

render(){
   return(
  …………
           {this.renderParkings()}
           {this.renderModal()}
      </View>
   )
}

Now, the required style used in the renderModal() function is provided in the code snippet below:

modal : {
    backgroundColor : theme.COLORS.white
  }

Hence, we will get the following result in the emulator screen:

As we can see, a modal appears on the screen. But the modal is too small, so we need to configure it with more props and style in order to make the modal more appealing.

Configuring Modal properties and styles

Here, we are going to configure the

Modal

component with some additional props and styles. For that, we need to use the code from the following code snippet:

renderModal(){
     const {activeModal} = this.state;
     if (!activeModal) return null;     
     
     return(
       <Modal
        isVisible
        useNativeDriver
        style={styles.modalContainer}
        onBackButtonPress={() => this.setState({ activeModal: null })}
        onBackdropPress={() => this.setState({ activeModal: null })}
        onSwipeComplete={() => this.setState({ activeModal: null })}
        
       >
         <View style={styles.modal}>
           <Text>{activeModal.title}</Text>
         </View>
       </Modal>
     )
   }

Here, we have included a prop called useNativeDriver which uses the native driver configurations and properties to handle the workings of Modal. We have also included a inSwipeComplete event which changes the activeModal state to null. Then, we have also provided a style property to the

Modal

component which is provided in the code snippet below:

modalContainer: {
    margin: 0,
    justifyContent: 'flex-end',
  },
  modal: {
    height: height * 0.75,
    backgroundColor: theme.COLORS.white,
  },

Hence, we will get the following result in the emulator screen:

As we can see, the Modal component now covers more than half of the lower part of the screen.

Adding Modal content

Now, we are going to add some content inside the Modal view. We have added the trigger to open the Modal when we press the buy button in each car parking spot. When triggering, we have set the activeModal state to the particular parking spot data from the parkingsSpots data array. Now, we are going to use the value stored in the activeModal state in order to add the different parking spot information to the Modal. For that, we need to use the code from the following code snippet in the renderModal function:

renderModal(){
     const {activeModal , hours} = this.state;
     if (!activeModal) return null;     
     
     return(
       <Modal
        isVisible
        useNativeDriver
        style={styles.modalContainer}
        onBackButtonPress={() => this.setState({ activeModal: null })}
        onBackdropPress={() => this.setState({ activeModal: null })}
        onSwipeComplete={() => this.setState({ activeModal: null })}
        
       >
         <View style={styles.modal}>
           <View>
            <Text>{activeModal.title}</Text>
           </View>
           <View>
              <Text>{activeModal.description}</Text>
            </View>
            <View style={{flexDirection : 'row'}}>
              <Text>{activeModal.price}</Text>
              <Text>{activeModal.rating}</Text>
              <Text>{activeModal.distance}</Text>
              <Text>{activeModal.free}/{activeModal.total}</Text>
            </View>
            <View>
              <Text>Choose your Booking Period</Text>
            </View>
            <View>
                <TouchableOpacity style={styles.buy}>
                    <View style={styles.buyTotal}> 
                      <Text style={styles.buyTotalPrice}>${activeModal.price *2}</Text>
                      <Text style={{ color : theme.COLORS.white}}>{activeModal.price}x{hours[activeModal.id]} hrs</Text>
                    </View>
                    <View style={styles.buyButton}>
                      <Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text>
                    </View>
                </TouchableOpacity>
            </View>
         </View>
         
       </Modal>
     )
   }

Here, we have added different

View

and

Text

component to display the information in the parkingsSpots data array. We have also used the

TouchableOpacity

component which wraps the

View

and

Text

component for the final buy button in the Modal. The components are bound to different styles which are provided in the code snippet below:

modal: {
    flexDirection: 'column',
    height: height * 0.75,
    padding: theme.SIZES.base * 2,
    backgroundColor: theme.COLORS.white,
    borderTopLeftRadius: theme.SIZES.base,
    borderTopRightRadius: theme.SIZES.base,
  },

Hence, we will get the following result in our emulator screen:

As we can see, some content has appeared on the screen but are out of place. Now, we need to style them properly in order to make the Modal content look appealing as in the actual app.

Here, we can also notice that we have added the additional distance and description data in the Modal content. But these data are not included in the parkingsSpots data array. So, we need to include that first.

Adding addition data

Here, we are going to add the distance and description data to each item in the parkingsSpots data array as shown in the code snippet below:

const parkingsSpots = [
  {
    id: 1,
    title: 'Parking 1',
    price: 5,
    rating: 4.2,
    spots: 20,
    free: 10,
    coordinate: {
      latitude: 37.78735,
      longitude: -122.4334,
    },
    distance : 2.5,
    description: `Description about this parking lot
Open year 2018
Secure with CTV`,
  },
  {
    id: 2,
    title: 'Parking 2',
    price: 7,
    rating: 3.8,
    spots: 25,
    free: 20,
    coordinate: {
      latitude: 37.78845,
      longitude: -122.4344,
    },
    distance : 3.5,
    description: `Description about this parking lot
Open year 2018
Secure with CTV`,
  },
  {
    id: 3,
    title: 'Parking 3',
    price: 10,
    rating: 4.9,
    spots: 50,
    free: 25,
    coordinate: {
      latitude: 37.78615,
      longitude: -122.4314,
    },
    distance : 1,
    description: `Description about this parking lot
Open year 2018
Secure with CTV`,
  },
];

Styling the content

Here, we are going to style the components inside the

Modal

component in order to make the Modal content appear as in the actual app. For that, we need to use the code in the following code snippet:

<Modal
        isVisible
        useNativeDriver
        style={styles.modalContainer}
        onBackButtonPress={() => this.setState({ activeModal: null })}
        onBackdropPress={() => this.setState({ activeModal: null })}
        onSwipeComplete={() => this.setState({ activeModal: null })}
        
       >
         <View style={styles.modal}>
          <View>
            <Text style={{ fontSize: theme.SIZES.font * 1.5 }}>
              {activeModal.title}
            </Text>
          </View>
          <View style={{ paddingVertical: theme.SIZES.base }}>
            <Text style={{ color: theme.COLORS.gray, fontSize: theme.SIZES.font * 1.1 }}>
              {activeModal.description}
            </Text>
          </View>
          <View style={styles.modalInfo}>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> ${activeModal.price}</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.rating}</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.distance}km</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.free}/{activeModal.spots}</Text>
            </View>
          </View>
          <View style={styles.modalHours}>
            <Text style={{ textAlign: 'center', fontWeight: '500' }}>Choose your Booking Period:</Text>
          </View>
          <View>
            <TouchableOpacity style={styles.payBtn}>
              <Text style={styles.payText}>
                Proceed to pay ${activeModal.price * hours[activeModal.id]}
              </Text>
              <FontAwesome name='angle-right' size={theme.SIZES.icon * 1.75} color={theme.COLORS.white} />
            </TouchableOpacity>
          </View>
        </View>
         
       </Modal>

Here, we have added different inline style properties as well as styles from the

StyleSheet

component. The required styles from the

StyleSheet

component is provided in the code snippet below:

 modalInfo: {
    flexDirection: 'row',
    justifyContent: 'space-evenly',
    paddingVertical: theme.SIZES.base,
    borderTopWidth: 1,
    borderBottomWidth: 1,
    borderTopColor: theme.COLORS.overlay,
    borderBottomColor: theme.COLORS.overlay,
  },
 modalHours: {
    paddingVertical: height * 0.11,
  },
 payBtn: {
    borderRadius: 6,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: theme.SIZES.base * 1.5,
    backgroundColor: theme.COLORS.red,
  },
  payText: {
    fontWeight: '600',
    fontSize: theme.SIZES.base * 1.5,
    color: theme.COLORS.white,
  }

Hence, we will get the following result in our emulator screen:

As we can see, we have got all the components in the proper positions which makes the Modal look more appealing. Now, we need to add icons to the Modal.

Adding Icons

Here, we are going to add the icons to the respective UI sections in the Modal content. We have already imported the Ionicons package from the vector-icons package provided by the expo client. Now, we are going to include the Ionicons component as shown in the code snippet below:

 <View style={styles.modalInfo}>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Ionicons name='ios-pricetag' size={theme.SIZES.icon * 1.1} color={theme.COLORS.gray} />
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> ${activeModal.price}</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Ionicons name='ios-star' size={theme.SIZES.icon * 1.1} color={theme.COLORS.gray} />
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.rating}</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Ionicons name='ios-pin' size={theme.SIZES.icon * 1.1} color={theme.COLORS.gray} />
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.distance}km</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Ionicons name='ios-car' size={theme.SIZES.icon * 1.3} color={theme.COLORS.gray} />
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.free}/{activeModal.spots}</Text>
            </View>
          </View>

Here, we have provided the size and color props to the Ionicons component. The props are in accordance to our

COLORS

and

SIZES

variable from the

theme.js

file.

Hence, we will get the following result in our emulator screen:

As we can see, we have got the icons in our

Modal

view. But we can see there is something missing in section with ‘Choose your Bookings Period’. In this section, we need to add the hours section as in the parking spot cards.

Adding hours section to Modal

Here, we are simply going to add the hours section to modal. We are going to add this section using below the

Text

component having ‘Choose your Booking Period’ text as shown in the code snippet below:

 <View style={styles.modalHours}>
            <Text style={{ textAlign: 'center', fontWeight: '500' }}>Choose your Booking Period:</Text>
            <View style={styles.modalHoursDropdown}>
              <Text style={{ color: theme.COLORS.gray }}>5:00 hrs</Text>
            </View>
          </View>

Here, the

View

component wraps the

Text

component with text showing hours. The required style is provided in the code snippet below:

modalHours: {
    paddingVertical: height * 0.15,
  },
  modalHoursDropdown: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    paddingVertical: theme.SIZES.base,
  },

Hence, we will get the following result in our emulator screen:

As we can see, we have got the hours section in our Modal. With this, we have come to the end of this part of our tutorial.

Finally, we have successfully completed the implementation of Modal in our Map screen.

Conclusion

This tutorial is the sixth part of the React Native Car Parking Finder App UI clone tutorial series. In this part, we continued from where we left off in the fifth part of this tutorial series. In this part of the tutorial, we learned how to set up the react-native-modal package in order to implement the Modal in our Map screen. We also learned how to configure the Modal component in order to make it look as well as transition better. Then, we also got insight into adding different UI sections inside the