Build a React Native app using Expo - Installation + Navigation Tabs + Google Maps Part 1

28/06/2020   by Luciana Sato

The video below show step by step how to install the React Native app using Expo, the dependencies project and how to configure the navigation tabs.

You can initially start the project typing the commands below:

expo init PROJECT_NAME

cd PROJECT_NAME

expo start

After the installation and starting Expo, you can choose some options to start emulating your app.

In this project, I'm emulating the app in my mobile phone using the QRCode.

The next step is install the dependencies:

expo install @react-navigation/native react-navigation react-navigation-tabs react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context react-native-maps

Now you are ready to start the app.

First, create the folder src and src/screens and add two new screens: MapScreen and MapListScreen.


    import React from 'react'
    import { SafeAreaView } from 'react-navigation'
    import { Text, StyleSheet } from 'react-native'
    import Map from '../components/Map'

    const MapScreen = ({ navigation }) => {
        return (
        <SafeAreaView forceInset={{ top: 'always' }}>
            <Map />
        </SafeAreaView>
    )
    }

    export default MapScreen


    import React from 'react'
    import { SafeAreaView } from 'react-navigation'
    import { Text, StyleSheet } from 'react-native'
    
    const MapListScreen = ({ navigation }) => {
      return (
        <SafeAreaView forceInset={{ top: 'always' }}>
          <Text style={{ fontSize: 50 }}>MapListScreen</Text>
        </SafeAreaView>
      )
    }
    
    export default MapListScreen

After, create the src/navigationRef.js that will control the tabs navigation.

    import { NavigationActions } from 'react-navigation'

    let navigator

    export const setNavigator = nav => {
      navigator = nav
    }

    export const navigate = (routeName, params) => {
      navigator.dispatch(
        NavigationActions.navigate({
          routeName,
          params
        })
      )
    }

Then, in the App.js file, you will configure this screens and tabs.

    import React from 'react';
    import { StyleSheet, Text, View } from 'react-native';
    import { createAppContainer, createSwitchNavigator } from 'react-navigation'
    import { createBottomTabNavigator } from 'react-navigation-tabs'
    import MapScreen from './src/screens/MapScreen'
    import MapListScreen from './src/screens/MapListScreen'
    import { setNavigator } from './src/navigationRef'

    const switchNavigator = createSwitchNavigator({
      mainFlow: createBottomTabNavigator({
        MapView: MapScreen,
        MapList: MapListScreen
      })
    })

    const App = createAppContainer(switchNavigator)

    export default () => {
      return (
        <App 
          ref={navigator => {
            setNavigator(navigator)
          }}
        />
      );
    }

After that you are able to configure the Google Maps at the app.json file and add the apiKey (you can get in your Google Accounts).

Create a src/components folder and add the Map.js. In this file, you will configure the MapView and the markers.

    import React from 'react'
    import MapView from 'react-native-maps'
    import { StyleSheet, Dimensions } from 'react-native'

    const height = Dimensions.get('window').height

    const Map = () => {
      return (
        <MapView
          style={styles.map}
          loadingEnabled={true}
          region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121
          }}
        >

        </MapView>
      )
    }

    const styles = StyleSheet.create({
      map: {
        height
      }
    })

    export default Map

In the next post, you'll learn how to add dynamic markers on the map.