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

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

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

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.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Share Code Between React and React Native

Learn how to share code between React and React Native to avoid duplicating logic. Sharing Code Between React and React-Native: What Not to Share. This question of sharing code between React and React Native, in fact, one of the hot topics among React and React native developers all over the world. React and React-Native allow a learn once write anywhere paradigm. This is great, because one tech team can build both your web app and native mobile experience. The problem is developers hate writing things twice. There have been a couple of efforts to build a unifying technology to write an application once and have it work on both web and native.

React Native vs. Native iOS: Building Mobile Apps with React Native and Swift

Learn from creating apps with React Native and talk about how it compares to developing native iOS apps and working with React for the web. React is a powerful JavaScript library for creating rich user interfaces. It was originally developed for the web for websites like Facebook and Instagram. React Native is a way of using the same React technology to create mobile apps that automatically work on different platforms.

Hire React Js Developer from Expert React JS Development Company

Are you looking to [hire React JS developer](https://www.mobiwebtech.com/react-js-development-company/ "hire React JS developer") from a prestigious and reliable React JS development company? Visit at Mobiweb Technologies here we have a big team...