How do I set a marker in MapView of React Native

Question

• I want to set a marker on MapView in React Native, but I can't find any information through official documents of MapView.
• If it is not allowed in that way, how can I use existed react module such as react-googlemaps in React Native?

Answer 1

Thank you @naoufal. Finally I am able to display markers on map for react native IOS.

<View style={styles.container}>         <MapView style={styles.map}           initialRegion={{               latitude: 37.78825,               longitude: -122.4324,               latitudeDelta: 0.0,               longitudeDelta: 0.0,           }}         >         <MapView.Marker             coordinate={{latitude: 37.78825,             longitude: -122.4324}}             title={"title"}             description={"description"}          />       </MapView>  </View> 

For map and container styles, I have used following styles:

 var styles = StyleSheet.create({    container: {     flex: 1,     justifyContent: 'center',     alignItems: 'center',     backgroundColor: '#F5FCFF',   },     map: {       position: 'absolute',       top: 0,       left: 0,       right: 0,       bottom: 0,     } }); 

I have referred following link: React native IOS- Display Markers on map

Answer 2

You can set markers using the annotations prop.

For example:

var markers = [   {     latitude: 45.65,     longitude: -78.90,     title: 'Foo Place',     subtitle: '1234 Foo Drive'   } ];  <MapView   region={...}   annotations={markers} />