Car Parking Finder App UI Clone with React Native #1 : Map View

This Car Parking Finder App UI clone tutorial series was inspired by the React Native App Templates 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.

This tutorial replicates the coding implementations and designs from the Youtube video tutorial by React UI Kit for the Car Parking Finder App UI Clone. The video tutorial is delivered using speed coding with quick implementations which may be difficult for any developer to comprehend.

Therefore, the video tutorial is not made for beginners as it does not explain any details of the code. So in order to make things easier and clearer, this tutorial series breaks down the video into different sections. It also provides step by step guide to implement each UI section of the app. This will make things easier for anyone especially the beginners.

Overview

In this first part of this tutorial series, we are going to implement the map view as well as divide the map view screen into different UI sections for upcoming tutorial parts. This first part basically lays out the foundation for upcoming parts of this tutorial series so that it will become easier later on.

Here, the idea is to start with a new React Native starter project using expo. Then, we will begin by implementing the map view. After that, we will divide the UI sections of the map screen.

So, let us begin!!

Note that, in this tutorial, we are going to use the EXPO as the React Native project development tool. So first, we are going to create a boilerplate React Native application using expo client.

Creating Starter React Native project

First and foremost, since we are going to use the expo as a development engine, we need to install it into our system. To install expo globally into our system, we need to have Node Package Manager(NPM) installed first.

Then, we need to run the following command:

npm install -g expo

Now, we need to create a boilerplate react native application using expo.

In order to do this, we need to run following command in the desired project directory:

expo init <project_name> // project name==> carParking

After running the above command, we will be asked to choose the template for the boilerplate app. Here, we are going to choose the blank template. The blank template provides a very minimal app template as clean as an empty canvas.

The selection screenshot is provided below:

As we can see, we choose the blank template and hit enter. Then, we need to enter the project name and after that, the boilerplate react native app is configured into our directory.

Now, we need to enter the project directory and then run the command:

expo start

Then, we will get the following boilerplate app in our emulator screen:

As we can see, we have got the starter template running in the emulator. The screen is not configured with too many styles and layout designs. Just a simple white screen with text in the middle.

Configuring project files and folders

Now, in the project folder, we need to create a new directory named ‘screens’. In the ‘./screens/’ directory, we need to create a new JavaScript file called Map.js.

The overall project folder structure is provided in the screenshot below:

Now, we need to make the Map.js as a react native screen component.

For that, we need to copy the code from the following code snippet and paste in the Map.js file:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class Map extends React.Component {
  render(){
    return (
      <View style={styles.container}>
        <Text>Map</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Here, we have imported the React component from the ‘react’ package in order to configure the file as a react file. We have imported some necessary components from the react-native package as well.

Then, we have defined a class named

Map

which extends to Component module of the React component. In the render() function, we have configured a bare minimal template that has a

View

component wrapping

Text

component. Then, we have defined some styles using the

StyleSheet

component.

Now, we need to import the Map component screen into our App.js file. For that, we need to add the following code to our App.js file:

import Map from './screens/Map'

Now, we need to replace the code inside the render() method of App.js file with

Map

component as shown in the code snippet below:

render(){
    return (
      <Map />
    );
  }

As a result, we will get the same screen as earlier in the emulator.

Here, we can remove styles from the App.js file as well. Now, we are only going to work on the Map.js file for the

Map

view screen.

Implementing Map View

In this step, we are going to create a

Map

view for our React Native Car Parking Finder clone in the Map.js file. For that, we are going to make use of the react-native-maps package which provides us with the

MapView

component. This package provides a Map component that uses Apple Maps or Google Maps on iOS and Google Maps on Android.

Now, we need to install react-native-maps package into our project by using the following command:

expo install react-native-maps

Next, we need to import react-native-maps package into our Map.js file as follows:

import MapView from 'react-native-maps';

Now, in order to include the map to our

Map

screen, we need to use the

MapView

component provided by the react-native-maps package as shown in the code snippet below:

map: {
    width: 200,
    height : 200
  },

Here, we have

MapView

component bound to map styles as well as

initialRegion

prop. The

initialRegion

prop allows us to set map location configurations with latitude and longitude values.

The map style is provided in the code snippet below:

As we can see, we have got the map on the screen with respective location coordinates. The map has the height and width of 200 pixels which doesn’t seem very appealing. Now, we are going to make the map in the screen appealing as well as divide the map view section into the header and parking section.

Separating UI sections in Map screen

Now, in this step, we are going to divide the Map screen from Map.js file into different UI sections. The UI sections that we need to include are the header section which will appear above the

MapView

and the parking section which will appear below the

MapView

. In addition, we will make the map bigger covering one-third of the entire screen. Here, the header section will include the location information and the parking section will show the info on parking spots on the map.

We will implement these sections in upcoming tutorials. But for now, we will just concentrate on dividing the section so that it will be easier for us in later tutorial parts.

Separate Header Section

Here, we are going to make a separate header section template. We are going to implement this section in the function which returns the template code. The function we are going to create is called renderHeader().

The coding implementation of in function is provided in the code snippet below:

renderHeader(){
      return(
          <View style={styles.header}>
              <Text>Header</Text>
          </View>
      )
 }

Here, we have just provided some basic layout for the header section. We will implement the full design in the later tutorials. Here, the renderHeader() function returns a template with a

View

component

wrapping Text

component.

Of course, there is an inline style bound to View component which is provided below:

header: {
    flex : 0.5,
    justifyContent: 'center',
  },

Separate Parking Section

Here, we are going to make a separate parking section template which will include the information on parking spots located on the map.

For that, we are going to implement two functions called renderParkings() and renderParking(). These two functions will combine to provide the parking section template. The renderParking() function will return the parking template for each parking spot. And, the renderParkings() will return the multiple renderParking() method to display multiple parking templates in the parking section.

But here in the tutorial part, we are just going to give them a basic layout in order to separate the UI sections. The detail implementation will be done in the upcoming tutorials.

The basic template code which the renderParkings() and renderParking() method returns are provided in the code snippet below:

renderParking(){
      return(
          <View style={styles.parking}>
              <Text>parkings</Text>
          </View>
      )
  }
 renderParkings(){
      return(
          <ScrollView horizontal contentContainerStyle={styles.parkings}>
              {this.renderParking()}
          </ScrollView>
      )
 }

Here, we have just created basic layouts for the parking section. The renderParking() method returns a simple template with

View

component wrapping

Text

. And, the renderParkings() method returns a template where renderParking() method is called inside the

ScrollView

component.

The

ScrollView

component components have

horizontal

prop which enables us to implement horizontal scroll on the screen.

Of course, there are some styles bound to components in the above code snippet which are provided below:

parkings:{
   flex : 1,
    position: 'absolute',
    right: 0,
    left: 0,
    bottom: 0,
  },
  parking : {
    backgroundColor : 'white',
    borderRadius : 6,
    padding : 12,
    marginHorizontal: 24
  }

Now, we need to include both the sections along with

MapView

component in the render() method of Map.js file.

For that, we can use the code provided in the code snippet below:

render(){
    return (
      <View style={styles.container}>
        {this.renderHeader()}
        <MapView style={styles.map}
            initialRegion={{
                latitude: 37.78825,
                longitude: -122.4324,
                latitudeDelta: 0.0922,
                longitudeDelta: 0.0421,
            }}
        >
        </MapView>
        {this.renderParkings()}
      </View>
    );
  }

Here, we have included the renderHeader() above the

MapView

and renderParkings() method below the

MapView

In addition, in order to provide a proper view of the map on the screen, we need to make some changes in map style which is provided below:

map:{
  flex : 3
}

Finally, we have successfully implemented the

MapView

as well as separated different UI sections of the map screen. With this, we have come to the end of this part of the tutorial.

Conclusion

This is the first part of our tutorial series to clone the React Native Car Parking Finder app UI. In this part of the tutorial, we first learned how to set up a stater react native app project by using expo.

Then, we learned how to configure the screens directory in order to prepare for the app UI. After that, we got step by step guide on how to implement the

MapView

component using a react-native-maps package.

Lastly, we learned how to separate the screen UI sections by defining functions that return the template of the particular section.

Well, this tutorial just paves the foundation for upcoming tutorials. In the next part, we are going to implement the swiping animation of the parking section.

So, Stay Tuned folks!!!