What changes should I make to add marker on the map? - react-native

Question

This is what I implemented so far. I am unable to add a marker to the current location on the map. Although I am able to get the current location as well as coordinates using the function findCoordinates() But I am unable to display on the map. Please suggest me where I am wrong or what should I do?
Here is the code I am sharing with you. Please suggest me the better ways to do it.
Thanks in advance
export default class App extends React.Component {
state = {
mapRegion: null,
hasLocationPermissions: false,
locationResult: null,
location: null,
};
componentDidMount() {
this.getLocationAsync();
}
handleMapRegionChange = mapRegion => {
this.setState({ mapRegion });
};
async getLocationAsync () {
// permissions returns only for location permissions on iOS and under certain conditions, see Permissions.LOCATION
const { status, permissions } = await Permissions.askAsync(
Permissions.LOCATION
);
if (status === 'granted') {
this.setState({ hasLocationPermissions: true });
// let location = await Location.getCurrentPositionAsync({ enableHighAccuracy: true });
let location = await Location.getCurrentPositionAsync({});
this.setState({ locationResult: JSON.stringify(location) });
// Center the map on the location we just fetched.
this.setState({
mapRegion: {
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.04,
longitudeDelta: 0.05,
},
});
} else {
alert('Location permission not granted');
}
};
findCoordinates = () => {
navigator.geolocation.getCurrentPosition(
position => {
const location = JSON.stringify(position);
this.setState({ location });
},
error => Alert.alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
};
render() {
return (
<View style={styles.container}>
<MapView
style={styles.mapStyle}
region={this.state.mapRegion}
onRegionChange={this.handleMapRegionChange}
/>
<Ionicons style = {{paddingLeft: 0}} name = "md-locate" size = {30} color = "red"
onPress = {this.findCoordinates}
/>
<TouchableOpacity onPress={this.findCoordinates}>
<Text style={styles.welcome}>My Location</Text>
<Text>Location: {this.state.location}</Text>
</TouchableOpacity>
</View>
);
}
}
App.navigationOptions = {
title: 'Location',
headerStyle: {
backgroundColor: '#ff6666',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
fontSize:20
},
};

Answer 1

import { Marker } from 'react-native-maps';
//you need to set the initial latitude and longitude
value with deltas and use the marker component from react-native-maps
<MapView
style={styles.mapStyle}
region={this.state.mapRegion}
onRegionChange={this.handleMapRegionChange}>
<Marker
coordinate={this.state.location}
title={marker.title}
description={marker.description}
/>
</MapView>

Answer 2

You could try below
findCoordinates = () => {
navigator.geolocation.getCurrentPosition(
position => {
this.setState({ location });
},
error => Alert.alert(error.message),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
);
};
render() {
return (
<View style={styles.container}>
<MapView
style={styles.mapStyle}
region={this.state.mapRegion}
onRegionChange={this.handleMapRegionChange}
>
{this.state.location && (
<MapView.Marker
coordinate={this.state.location.coords} // <-- Pass coordinate { latitude: number, longitude: number }
/>
)}
</MapView>
</View>
)
}