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 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. React UI Kit 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==> 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 template. The blank template provides a very minimal app template as clean as an empty canvas. blank 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 . In the directory, we need to create a new JavaScript file called . ‘screens’ ‘./screens/’ Map.js The overall project folder structure is provided in the screenshot below: Now, we need to make the as a react native screen component. Map.js For that, we need to copy the code from the following code snippet and paste in the file: Map.js React ; { StyleSheet, Text, View } ; { render(){ ( Map ); } } styles = StyleSheet.create({ : { : , : , : , : , }, }); import from 'react' import from 'react-native' export default . class Map extends React Component return View style {styles.container} View const 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 which extends to Component module of the React component. In the function, we have configured a bare minimal template that has a component wrapping component. Then, we have defined some styles using the component. Map render() View Text StyleSheet Now, we need to import the Map component screen into our file. For that, we need to add the following code to our file: App.js App.js import Map from './screens/Map' Now, we need to replace the code inside the method of App.js file with component as shown in the code snippet below: render() Map render(){ ( return ); } Map As a result, we will get the same screen as earlier in the emulator. Here, we can remove styles from the file as well. Now, we are only going to work on the file for the view screen. App.js Map.js Map Implementing Map View In this step, we are going to create a view for our React Native Car Parking Finder clone in the file. For that, we are going to make use of the package which provides us with the component. This package provides a Map component that uses Apple Maps or Google Maps on iOS and Google Maps on Android. Map Map.js react-native-maps MapView Now, we need to install package into our project by using the following command: react-native-maps expo install react-native-maps Next, we need to import package into our Map.js file as follows: react-native-maps import MapView from 'react-native-maps'; Now, in order to include the map to our screen, we need to use the component provided by the react-native-maps package as shown in the code snippet below: Map MapView map: { : , : }, width 200 height 200 Here, we have component bound to map styles as well as prop. The prop allows us to set map location configurations with latitude and longitude values. MapView initialRegion initialRegion 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 and the parking section which will appear below the . 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. MapView MapView 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(){ ( Header ) } return View style {styles.header} 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 function returns a template with a component component. renderHeader() View wrapping Text 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 and . These two functions will combine to provide the parking section template. The function will return the parking template for each parking spot. And, the will return the multiple ) method to display multiple parking templates in the parking section. renderParkings() renderParking() renderParking() renderParkings() renderParking( 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 and method returns are provided in the code snippet below: renderParkings() renderParking() renderParking(){ ( parkings ) } renderParkings(){ ( ) } return View style {styles.parking} View return {this.renderParking()} ScrollView horizontal contentContainerStyle {styles.parkings} ScrollView Here, we have just created basic layouts for the parking section. The method returns a simple template with component wrapping . And, the method returns a template where method is called inside the component. renderParking() View Text renderParkings() renderParking() ScrollView The component components have prop which enables us to implement horizontal scroll on the screen. ScrollView horizontal 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 component in the method of file. MapView render() Map.js For that, we can use the code provided in the code snippet below: render(){ ( ); } return {this.renderHeader()} View style {styles.container} {this.renderParkings()} View Here, we have included the above the and method below the . renderHeader() MapView renderParkings() 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 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. MapView 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 component using a package. MapView react-native-maps 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!!!