Skip to content

Instantly share code, notes, and snippets.

@dwijonarko
Created April 8, 2019 08:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dwijonarko/f74e7f338dbc14f944f2b9b438d0d1ce to your computer and use it in GitHub Desktop.
Save dwijonarko/f74e7f338dbc14f944f2b9b438d0d1ce to your computer and use it in GitHub Desktop.
import React, { Component } from 'react';
import { Text, View, StyleSheet,Dimensions } from 'react-native';
import { Constants, MapView, Location, Permissions } from 'expo';
const window = Dimensions.get('window');
const { width, height } = window;
export default class MapScreen extends Component {
constructor(props) {
super(props)
this.state = {
mapRegion: { latitude: -7.966620, longitude: 112.632629, latitudeDelta: 0.0922, longitudeDelta: 0.0421 },
locationResult: null,
location: { coords: { latitude: -7.966620, longitude: 112.632629 } },
};
};
componentWillMount() {
this._getLocationAsync();
}
_getLocationAsync = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
this.setState({
locationResult: 'Permission to access location was denied',
location,
});
}
let location = await Location.getCurrentPositionAsync({});
this.setState({ locationResult: JSON.stringify(location), location });
};
render() {
return (
<View style={styles.container}>
<MapView
style={{ alignSelf: 'stretch', height: window.height*0.8 }}
region={{ latitude: this.state.location.coords.latitude, longitude: this.state.location.coords.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
zoomEnabled={true}
scrollEnabled={true}
showsScale={true}
animateToRegion={{ latitude: this.state.location.coords.latitude, longitude: this.state.location.coords.longitude, latitudeDelta: 0.0922, longitudeDelta: 0.0421 }}
>
<MapView.Marker
coordinate={this.state.location.coords}
title="My Marker"
description="Some description"
/>
</MapView>
<Text>
Location: {this.state.locationResult}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment