React Native Car Parking Finder App UI Clone #3 : Parking Spot Cards
Tags: reactnative, reactnativecarpark, reactnativelayout, carparkingapp
Published: 2019-10-24 12:13:58

---
title: React Native Car Parking Finder App UI Clone #3 : Parking Spot Cards
published: true
date: 2019-10-24 11:49:23 UTC
tags: React native,React native Carpark,React native Layout,carparking app
canonical_url: https://kriss.io/react-native-car-parking-finder-app-ui-clone-3-parking-spot-cards/
cover_image: https://kriss.io/wp-content/uploads/2019/10/React-native-layout-carparking-app.png
---

This tutorial is the third part of our React Native Car Parking App UI clone series. In the [previous part](https://dev.to/absek/car-parking-finder-app-ui-clone-in-react-native-2-scrolling-swiping-transition-kc1), we successfully implemented the scrolling transition of car parking spots. In this tutorial, we are going to continue from where we left off in the last part. So, it is recommended to go through the previous part in order to get the full insight into the project.


As stated in the previous parts, the tutorial series was inspired by the [Store Locator App template](https://www.instamobile.io/app-templates/react-native-store-locator-app-template/?ref=4094&campaign=dev.to) 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 second 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=WbCthBwMxQc&list=PLNRPou200YIeu4UllJkv8-Ca19Ld_eOay&index=9) for the Camping Spots Finder App clone. The video tutorial uses the fast coding technique to implement this UI clone which may be difficult to grasp for any developer especially the beginners. This written tutorial provides the step by step implementation which will be easier to understand and implement.

### Overview

In this third part of this tutorial series, we are going to add additional information to our parking spot cards of the parking section in the map screen as well as style it correctly. The idea is to integrate the car parking spot data into the parking spot card that we implemented with the scrolling transition in the last tutorial. Then, we are going to add some components and button styles to the card as well in order for it to look appealing. We are also going to use vector icons and style them properly.

_So, let us begin!!_

 

## Adding Car Parking Spot Info

Here, we are going to add some additional car parking spot information to our parking spot card in the parking section. We are also going to style it in order for it to look appealing. Now, we are going to use some additional data from `parkingSpots` array and use it in the `renderParking()` method as shown in the code snippet below:

```javascript
renderParking(item){
      return(
          <View key={`parking-${item.id}`} style={styles.parking}>
            <View style={{flex : 1, flexDirection : 'column'}}>
              <Text>x {item.spots} {item.title}</Text>
            </View>
            <View style={{flex : 1}}>
              <Text>${item.price}</Text>
              <Text>{item.rating}</Text>
            </View>
          </View>
      )
  }
```

Here, we have the parent `View` component wrapping two child `View` components. The first child `View` component has some inline styles with `spots` and `title` information. And, the second `View` component has `price` and `rating` information. The required style is provided in the code snippet below:

```javascript
parking : {
    flexDirection : 'row',
    backgroundColor : 'white',
    borderRadius : 6,
    padding : 24,
    marginHorizontal: 24,
    width : width - ( 24 * 2 )
  }
```

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

![](https://kriss.io/wp-content/uploads/2019/10/Screenshot_1571820658.png)

As we can see, some additional parking spot information has appeared on the parking spot card. But, we need to add more information from our `parkingSpots` array.

 

### **Adding Time Value for Parking Spot Cards**

Here, we are going to add the time value for each parking spot cards. For that, we need to define a state called `hours` as shown in the code snippet below:

```javascript
state = {
    hours: {},
}
```

[Read More...](https://kriss.io/react-native-car-parking-finder-app-ui-clone-3-parking-spot-cards/)

 

The post [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/) appeared first on [Kriss](https://kriss.io).

## Disclosure
This post includes affiliate links; I may receive compensation if you purchase
products or services from different links provided in this article.