React Native - MapView

In this chapter we will show you how to use maps in React Native.

Create File

Let's create src/components/home/MapViewExample.js

Using Maps

We are adding several props to MapView.

showsUserLocation and followUserLocation are booleans. You will need users permission before it can be used.

We also want to enable zoom by setting zoomEnabled = {true}

src/components/home/MapViewExample.js

Example

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

export default MapViewExample = (props) => {
   return (
      <MapView
         style = {styles.map}
         showsUserLocation = {false}
         followUserLocation = {false}
         zoomEnabled = {true}
      />
   )
}

const styles = StyleSheet.create ({
   map: {
      height: 400,
      marginTop: 80
   }
})

And finally we need to pass this to HomeContainer component.

src/components/home/HomeContainer.js

Example

import React, { Component } from 'react'
import { MapView } from 'react-native'
import MapViewExample from './MapViewExample'

export default class HomeContainer extends Component {

   constructor() {
      super();
   }
   render() {
      return (
         <MapViewExample/>
      );
   }
}

When we run the app, we can see the map.

Output