Implementing React Native Car Parking Finder App UI Clone #3 : Parking Spot Cards

Published Oct 24, 2019

This tutorial is the third part of our React Native Car Parking App UI clone series. In the previous part, 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 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 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:

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:

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:

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: