How to use map in React Native using react-native-maps IOS Apple map

Step 1: Install and set up React Native application

installed the React Native command line interface : npm install -g react-native-cli

you can create your project, simply using: react-native init ReactNativeMaps

You can run you project : react-native run-ios

Step 2: Add react-native-maps package

Now let’s install react-native-map : npm install react-native-maps --save-exact

and install pod

cd iOS || pod install || cd ..

Step 3: Set up Apple Maps (iOS)

We will check if Apple Maps works correctly. Add the following code to your current rendering component where you want to render your MapView.

import MapView from ‘react-native-maps’;

<MapView
style = {{flex: 1}}
initialRegion = {{
latitude: 8.645297,
longitude: 99.897332,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
</MapView>

And add marker on Apple map

import MapView, { Marker } from ‘react-native-maps’;

<Marker
coordinate = {{
latitude: 8.646348,
longitude: 99.893658,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<View
style = {{
backgroundColor: ‘purple’,
padding: 5,
borderRadius: 40,
}}>
<View
style = {{
backgroundColor: ‘# C49DBD’,
padding: 5,
borderRadius: 20,

shadowColor: ‘# 714B87’,
shadowOffset: {
width: 2,
height: 2,
),
shadowOpacity: 1,
shadowRadius: 20,
}}>

</View>
</View>
</Marker>

Complete code

import React from ‘react’;
import {StyleSheet, Text, View, Dimensions, ScrollView, Button, TextInput, FlatList} from ‘react-native’;

import MapView, {Marker} from ‘react-native-maps’;

const Profile: () => React $ Node = ({navigation}, {Props}) => {
return (
<View style = {{flex: 1}}>
<MapView
style = {{flex: 1}}
initialRegion = {{
latitude: 8.645473,
longitude: 99.897329,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<Marker
coordinate = {{
latitude: 8.645473,
longitude: 99.897329,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421,
}}>
<View
style = {{
backgroundColor: ‘purple’,
padding: 5,
borderRadius: 40,
}}>
<View
style = {{
backgroundColor: ‘# C49DBD’,
padding: 5,
borderRadius: 20,

shadowColor: ‘# 714B87’,
shadowOffset: {
width: 2,
height: 2,
),
shadowOpacity: 1,
shadowRadius: 20,
}}>

</View>
</View>
</Marker>
</MapView>
</View>
);
};
export default Profile;

My name is Sathit Srisawat