O'Reilly logo

React and React Native by Adam Boduch

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

What's around me?

The MapView component from react-native-maps is the main tool you'll use to render maps in your React Native applications.

Let's implement a basic MapView component to see what we get out of the box:

import React from 'react'; 
import { 
  AppRegistry, 
  View, 
} from 'react-native'; 
import MapView from 'react-native-maps'; 
 
import styles from './styles'; 
 
const WhatsAroundMe = () => ( 
  <View style={styles.container}> 
    <MapView 
      style={styles.mapView} 
      showsUserLocation 
      followUserLocation 
    /> 
  </View> 
); 
 
AppRegistry.registerComponent( 
  'WhatsAroundMe', 
  () => WhatsAroundMe 
); 

Not much to it. The two boolean properties that you've passed to MapView do a lot of work for you. The showsUserLocation property will activate the marker on the map that ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required