React Native Car Parking Finder App UI Clone #4 : Map Markers

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

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:

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:

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...

The post React Native Car Parking Finder App UI Clone #4 : Map Markers appeared first on Kriss.

Disclosure

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