This inspiration for this tutorial came from a React native real estate template that enables us to build fully functional ready to deploy mobile applications that anyone can use to build their own React Native application. This tutorial replicates the coding implementations and designs from the Youtube video tutorial by React UI Kit for the Camping Spots Finder App clone. The video tutorial features speed coding with quick implementations which may be difficult for beginners to grasp. So, this tutorial series breaks down the video into different sections. It also provides step by step guide which will be very easy for anyone to grasp and implement their own app.

In this first part of this tutorial series, we are going to implement the map as well as the setup header and header tabs which will create a base for the overall app UI. The idea is, to begin with implementing map view and then the header section with all the sections separated into different functions.

So, let us begin!!

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

Creating Boilerplate 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==> Camping Spots Finder

After running the above command, we will be asked to choose the template for the boilerplate app. Here, we are going to choose the t** abs **template which has several example screens and react-navigations configured. The selection screenshot is provided below:

As we can see, we choose the tabs 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:

Configuring Navigation files

We already have navigators set up in our project for the navigation purpose. But now, we need to configure the navigators and navigation files as required for our app.

So first, we need to create a ScreensNavigator.js file in our project’s ‘/navigations’ directory. Then, we need to create a Campings.js file and Settings.js file in our project’s ‘/screens’ directory. Now, our project structure will look something like given in the screenshot below:

Now, we need to copy the code from HomeScreen.js and paste it Campings.js file. Again, we need to do the same from SettingsScreen.js and to Settings.js Screen so that the project runs in the emulator without error for now.

Now in ScreensNavigator.js file, we need to configure the navigator including Camping and Setting screens. In order to do that we need to create a stack navigator using createStackNavigator method from the react-navigation package as shown in the code snippet below:

import React from 'react';
import { createStackNavigator } from 'react-navigation';

import Campings from '../screens/Campings';
import Settings from '../screens/Settings';

export default createStackNavigator({
  Campings: Campings,
  Settings: Settings,
});

Here, we already have the AppNavigator.js file configured to our project files. But, we need to re-configure the AppNavigator.js file with our new ScreensNavigator. In order to do that, we need to configure the main AppNavigator.js file as in the code snippet below:

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';

import ScreensNavigator from './ScreensNavigator';

export default createAppContainer(createSwitchNavigator({
  Main: ScreensNavigator,
}));

Now, if we re-run the project in the emulator, we will get the same screen as before.

Creating Map View in Camping.js

In this step, we are going to create a Map view for our React Native Camping Spots Finder clone in the Camping.js file. For that, we are going to make use of the react-native-mapspackage which provides us with the MapView component.

First, we need to remove all the code from Camping.js. Then, we are going to import all the necessary components from our React and react-native package which is shown in the code snippet below:

import React from 'react';
import {
  Image,
  Platform,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

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 Camping.js file as follows:

import MapView from 'react-native-maps';

Now, in order to include the map to our Camping screen, we need to use the MapView component provided by react-native-package as shown in the code snippet below:

class Campings extends React.Component{
  render(){
    return (
      <View style={styles.container}>
        <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}>
          <View style={styles.map}>
            <MapView style={{flex: 1, height : 200, width : 200}} 
            initialRegion={{
              latitude: 37.78825,
              longitude: -122.4324,
              latitudeDelta: 0.0922,
              longitudeDelta: 0.0421,
            }}
            />
          </View>
        </ScrollView>
      </View>
    );
  }
}

Here, we have MapView component bound to some styles as well as initialRegion prop. The initialRegion prop allows us to set map location configurations as shown in the code snippet above. There are several Views components and a ScrollView component wrapping the MapView with some styles in order to position the map properly. The required styles are provided in the code snippet below:

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  map :{
    flex : 1
  },
  contentContainer: {
    paddingTop: 30,
  },
});

Hence, we get the following result in our emulator screen:

Configuring Map styles

In order to show the map properly on the screen, we are going to use Dimensions component provided by the react-native package. By using Dimensions component, we can get the height and width of the entire app screen. Then, we can configure it with our MapView to show Map properly on the screen. Now, let us import the Dimensions as follows:

Please read more here

#react-native