-
Notifications
You must be signed in to change notification settings - Fork 0
/
App.tsx
72 lines (63 loc) · 1.71 KB
/
App.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
import { useState, useEffect, useRef } from "react";
import { View } from "react-native";
import { styles } from "./styles";
import {
requestForegroundPermissionsAsync,
getCurrentPositionAsync,
LocationObject,
watchPositionAsync,
LocationAccuracy
} from "expo-location";
import MapView, { Marker } from "react-native-maps";
export default function App() {
const [location, setLocation] = useState<LocationObject | null>(null);
const mapRef = useRef<MapView>(null);
async function requestLocationPermissions() {
// if user have permission
const { granted } = await requestForegroundPermissionsAsync();
if (granted) {
const currentPosition = await getCurrentPositionAsync();
setLocation(currentPosition);
}
}
useEffect(() => {
requestLocationPermissions();
}, []);
useEffect(() => {
watchPositionAsync({
accuracy: LocationAccuracy.Highest,
timeInterval: 1000,
distanceInterval: 1
}, (response) => {
setLocation(response);
// Posição da camera no mapa
mapRef.current?.animateCamera({
pitch: 70,
center: response.coords
})
})
}, [])
return (
<View style={styles.container}>
{location && (
<MapView
ref={mapRef}
style={styles.map}
initialRegion={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
latitudeDelta: 0.005,
longitudeDelta: 0.005,
}}
>
<Marker
coordinate={{
latitude: location.coords.latitude,
longitude: location.coords.longitude,
}}
/>
</MapView>
)}
</View>
);
}