/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow
*/
import React from 'react';
import {
SafeAreaView,
StyleSheet,
ScrollView,
View,
Text,
StatusBar,
TouchableOpacity,
PermissionsAndroid,
Platform
} from 'react-native';
import {
Header,
LearnMoreLinks,
Colors,
DebugInstructions,
ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';
import Geolocation from "@react-native-community/geolocation";
import MapView from "react-native-map-clustering";
import {PROVIDER_GOOGLE,Marker,Polygon,Circle} from 'react-native-maps';
import NativePermissionsAndroid from "react-native/Libraries/PermissionsAndroid/NativePermissionsAndroid";
export default class App extends React.Component{
constructor() {
super();
this.state = {
latitude:'',
longitude:''
}
}
componentDidMount = async () =>{
if(Platform.OS == 'android'){
const response = await PermissionsAndroid.request(PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,{
'title':'MapsAndGeo',
'message':"Konumunuzu istiyoruzzz"
})
}else{
Geolocation.requestAuthorization();
}
Geolocation.getCurrentPosition(
position => {
const { coords:{latitude,longitude}} = position;
this.setState( {latitude,longitude})
console.log(latitude)
},
error => {
console.log(error)
}
);
// bu da farklı bir izlemeyi durdurma seçeneği
}
componentWillMount() {
Geolocation.clearWatch(this.watchID) // farklı bir sayfaya geçtiğimizde izleme durdurulacak
}
render(){
const { latitude,longitude } = this.state;
return <SafeAreaView>
<View style={styles.container}>
<MapView
provider={PROVIDER_GOOGLE}
style={styles.map}
region={{
latitude: latitude,
longitude: longitude,
latitudeDelta: 0.015,
longitudeDelta: 0.0121,
}}
showsUserLocation={true}
// followUserLocation={true}
>
<Marker coordinate={{latitude,longitude}} />
</MapView>
</View>
</SafeAreaView>
}
}
const styles = StyleSheet.create({
container: {
...StyleSheet.absoluteFillObject,
height: 800,
width: 400,
justifyContent: 'flex-end',
alignItems: 'center',
},
map: {
...StyleSheet.absoluteFillObject,
},
});