React Native Car Parking Finder App UI Clone #4 : Map Markers
Tags: reactnative, reactnativecarpark, carparkingapp, layout
Published: 2019-10-26 03:15:35

---
title: React Native Car Parking Finder App UI Clone #4 : Map Markers
published: true
date: 2019-10-25 16:46:54 UTC
tags: React native,React native Carpark,carparking app,layout
canonical_url: https://kriss.io/react-native-car-parking-finder-app-ui-clone-4-map-markers/
cover_image: https://kriss.io/wp-content/uploads/2019/10/React-native-layout-carparking-app.png
---

This tutorial is the fourth part of our React Native Car Parking App UI clone series. In the last part, we successfully implemented the car parking spots section. 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 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 inspiration of this tutorial 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 an amazing, 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 fourth 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 a fast coding style to deliver the overall tutorial to the viewers which may be difficult to grasp for any developer especially the beginners. This tutorial gives step by step guidance on the implementation of each UI section. Hence, the readers can relax and take time to implement the UI.

### Overview

In this fourth part of the tutorial series, we are going to add the custom Map Marker which will represent the car parking spot locations on the map. The idea is to integrate the `Marker` component provided by `MapView` component into the `MapView` in order to show the default location markers. Then, we are going to customize the markers in order to make it as in the actual app. Lastly, we are going to add the active style to each map marker.

_So, let us begin!!_

 

## **Changing `SrollView` to `FlatList`**

Firstly, we are going to make an extra change to our ScrollView in `renderParkings()` method. Here, we are going to change the `ScrollView` into `FlatList` in order to change our parking spot cards in the parking section into the list. By changing it into `FlatList`, we will get all the advantages offered by `FlatList` component as well as can include the `ScrollView` props into the `FlatList` component. The coding implementation for this is provided in the code snippet below:

```javascript
renderParkings(){
      return(
        <FlatList
          horizontal
          pagingEnabled
          scrollEnabled
          showsHorizontalScrollIndicator={false}
          scrollEventThrottle={16}
          snapToAlignment="center"
          style={styles.parkings}
          data={parkingsSpots}
          keyExtractor={(item, index) => `${item.id}`}
          renderItem={({ item }) => this.renderParking(item)}
        />
      )
}
```

Here, we have replaced the `ScrollView` with `FlatList` component. Most of the required props that we integrated to the `ScrollView` for a smooth swiping transition are also incorporated in the `FlatList` component. The extra props that we have added are the data for the `parkingsSpots` , `keyExtractor` in order to identify each item in the list uniquely and `renderItem` which will return the template. `FlatList` loops through each element of our `parkingsSpots` array and return the list view which can be customized as a template in the `renderItem` prop.

_Note that, we should not forget to import the FlatList component from the react-native package._

Now, we are also going to add a react hook called `componentWillMount()`, which will change the state of our `hours` state to 1 as shown in the code snippet below:

```javascript
componentWillMount() {
    const hours = {};
    parkingsSpots.map(parking => {hours[parking.id] = 1});
    this.setState({ hours });
  }
```

Now, we should get the same result as we did before with `ScrollView.` Hence, if we re-run the emulator, we will get the following result in our emulator screen:

![](https://kriss.io/wp-content/uploads/2019/10/Flatlist-scrolling.gif)

 

## **Adding the Map Markers**

Here, we are going to add the Map Marker to our `MapView` component. For this, we will need to add some additional coordinate data to our `parkingsSpots` array data as provided in the code snippet below:


[Read More...](https://kriss.io/react-native-car-parking-finder-app-ui-clone-4-map-markers/)


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