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 denotes the physical location of the device running this application. The followUserLocation property tells the map to update the location marker as the device moves around. Let's see the resulting map:

What's around me?

The current location of the device is clearly marked on the map. By default, points of interest are also rendered on the map. These are things in close proximity to the user so that they can see what's around them.

It's generally a good idea to use the followUserLocation property whenever using showsUserLocation. This makes the map zoom to region where the user is located.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset