Car Parking Finder App UI Clone in React Native #2: Scrolling/Swiping Transition
Tags: reactnative, reactnativecarpark, carparkingapp, reactnativelayout
Published: 2019-10-23 02:50:04

---
title: Car Parking Finder App UI Clone in React Native #2: Scrolling/Swiping Transition
published: true
date: 2019-10-23 02:37:22 UTC
tags: React native,React native Carpark,carparking app,react native layout
canonical_url: https://kriss.io/react-native-car-parking-finder-app-ui-clone-2-scrolling-swiping-transition/
cover_image: https://kriss.io/wp-content/uploads/2019/10/React-native-layout-carparking-app.png
---

This tutorial is the second part of our React Native Car Parking App UI clone series. [In the previous part](https://dev.to/absek/building-car-parking-finder-app-ui-clone-in-react-native-1-map-view-23c8), we successfully implemented the `MapView` section as well as separated different UI sections for the map screen. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to establish the basis and get insight into the overall project.

As mentioned in the previous part, the motivation to implement this UI clone series came from 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 provides overall guidance using fast coding 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 second part of this tutorial series, we are going to make some configurations to the parking section that we separated in the previous part of this tutorial.  The idea is to define some mock car parking spot data and integrate that data into the parking section as a card view. Then, we are going to implement scrolling animations to swipe each parking spot card to the left. Here, we are going to make the scrolling or swiping transition as smooth as possible.

_So, let us begin!!_

 

## Defining Mock Data

Here, we are going to define the mock data array which will contain the parking spot information as key-value pair in the object. Hence, we are going to initialize an array of objects in the Map.js file. So, we are going to initialize an array constant called `parkingSpots` with some parking spot data as shown in the code snippet below:

```javascript
const parkingsSpots = [
    {
      id: 1,
      title: 'Parking 1',
      price: 5,
      rating: 4.2,
      spots: 20,
      free: 10
    },
    {
      id: 2,
      title: 'Parking 2',
      price: 7,
      rating: 3.8,
      spots: 25,
      free: 20
    },
    {
      id: 3,
      title: 'Parking 3',
      price: 10,
      rating: 4.9,
      spots: 50,
      free: 25
    },
  ];
```

Each data has an `id`, `title`, `price`, `rating`, the total number of parking spots as `spots` and total free parking spots as `free`.

Now, we are going to integrate this data into our parking section by using it in our `renderParkings()` and `renderParking()` functions that we have defined in the earlier part of the tutorial. Here in the `renderParkings()` method, we are going to use `map()` array function in order to iterate through each item in the `parkingSpots` array. Then, the `map()` function will call the `renderParking()` function by sending a parameter which is an item of the `parkingSpots` array as shown in the code snippet below:

```javascript
renderParkings(){
      return(
          <ScrollView horizontal contentContainerStyle={styles.parkings}>
              {parkingsSpots.map((parking) => this.renderParking(parking))}
          </ScrollView>
      )
  }
```

Now, the `renderParking()` method is going to receive an item of `parkingSpots` array as a parameter. Then, we are going to use the parameter `item` in order to return the template with parking spot data as shown in the code snippet below:

```javascript
renderParking(item){
      return(
          <View key={`parking-${item.id}`} style={styles.parking}>
              <Text>{item.title}</Text>
          </View>
      )
  }
```

Here, we have used the item `id` as a `key` in order to identify each `View` component of a particular parking spot uniquely. Then, for now, we have just used the `title` information from the parking data.

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

![](https://kriss.io/wp-content/uploads/2019/10/map-in-carparking.gif)

As we can see, we have got three parking spots data in the parking section.

[Read More...](https://kriss.io/react-native-car-parking-finder-app-ui-clone-2-scrolling-swiping-transition/)



The post [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/) 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.