React Native Car Parking Finder App UI Clone #6: Adding Modal View
Tags: react, reactnative, reactnativecarpark, carparkingapp
Published: 2019-11-02 13:43:42

---
title: React Native Car Parking Finder App UI Clone #6: Adding Modal View
published: true
date: 2019-11-02 12:59:35 UTC
tags: React,React native,React native Carpark,carparking app
canonical_url: https://kriss.io/react-native-car-parking-finder-app-ui-clone-6-implementing-modal-view/
cover_image: https://kriss.io/wp-content/uploads/2019/10/React-native-layout-carparking-app.png
---

This tutorial is the sixth part of our React Native Car Parking App UI clone series. In the [last part](https://kriss.io/react-native-car-parking-finder-app-ui-clone-5-header-section/), 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.

In case anyone wants to learn from the beginning, all the parts for this tutorial series are available below:

- [React Native Car Parking Finder App UI Clone # 1: Map View](https://kriss.io/react-native-car-parking-finder-app-ui-clone-1-map-view/)
- [React Native Car Parking Finder App UI Clone # 2: Scrolling/Swiping Transition](https://kriss.io/react-native-car-parking-finder-app-ui-clone-2-scrolling-swiping-transition/)
- [Building React Native Car Parking Finder App UI Clone # 3: Parking Spot Cards](https://kriss.io/react-native-car-parking-finder-app-ui-clone-3-parking-spot-cards/)
- [React Native Car Parking Finder App UI Clone # 4: Map Markers](https://kriss.io/react-native-car-parking-finder-app-ui-clone-4-map-markers/)
- [R](https://kriss.io/react-native-car-parking-finder-app-ui-clone-4-map-markers/)[eact Native Car Parking Finder App UI Clone # 5: Header Section](https://kriss.io/react-native-car-parking-finder-app-ui-clone-5-header-section/)

As mentioned in the previous parts, the motivation for this tutorial series came from the [React Native Store Locator App template](https://www.instamobile.io/app-templates/react-native-store-locator-app-template/)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 fifth part is also the continuation of coding implementations and designs from the YouTube video tutorial by [React UI Kit](https://www.youtube.com/watch?v=CuMR9kRZJCw&list=PLNRPou200YIeu4UllJkv8-Ca19Ld_eOay&index=8) 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](https://github.com/react-native-community/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:

```javascript
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:

```javascript
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:

```javascript
  <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:

```javascript
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:

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

   )
}
```

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

```javascript
modal : {
    backgroundColor : theme.COLORS.white
  }
```

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

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-1.gif)

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:

```javascript
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:

```javascript
  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:

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-2.gif)

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:

```javascript
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:

```javascript
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:

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-3.gif)

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:

```javascript
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:

```javascript
<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:

```css
 odalInfo: {
    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:

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-4.gif)

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:

```javascript
           <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:

![](https://kriss.io/wp-content/uploads/2019/11/Screenshot_1572458575-512x1024.png)

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:

```javascript
          <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:

```javascript
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:

![](https://kriss.io/wp-content/uploads/2019/11/opening-modal-final.gif)

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 fourth 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 Modal component. Finally, we were successful in implementing the Modal view just as in the actual app design.

In the next part of this tutorial series, we are going to implement a time dropdown in our parking spot card section.

The post [React Native Car Parking Finder App UI Clone #6: Implementing Modal View](https://kriss.io/react-native-car-parking-finder-app-ui-clone-6-implementing-modal-view/) appeared first on [Kriss](https://kriss.io).

## Affiliate Disclosure
Keep in mind that we may receive commissions when you click our links and make purchases.