1import * as Location from 'expo-location';
2import React from 'react';
3import { Platform, ScrollView, StyleSheet, Text, View } from 'react-native';
4
5import SimpleActionDemo from '../../components/SimpleActionDemo';
6import TitleSwitch from '../../components/TitledSwitch';
7import usePermissions from '../../utilities/usePermissions';
8// Location.setGoogleApiKey('<PROVIDE_YOUR_OWN_API_KEY HERE>');
9
10const forwardGeocodingAddresses = [
11  '1 Hacker Way, CA',
12  'Palo Alto Caltrain Station',
13  'Rogers Arena, Vancouver',
14  'Zabłocie 43b, Kraków',
15  'Amsterdam Centraal',
16  ':-(',
17];
18
19const reverseGeocodingCoords = [
20  { latitude: 49.28, longitude: -123.12 }, // Seymour St, Vancouver
21  { latitude: 50.0615298, longitude: 19.9372142 }, // Main Square, Kraków
22  { latitude: 52.3730983, longitude: 4.8909126 }, // Dam Square, Amsterdam
23  { latitude: 0, longitude: 0 }, // North Atlantic Ocean
24];
25
26export default function GeocodingScreen() {
27  usePermissions(Location.requestForegroundPermissionsAsync);
28
29  const [useGoogleMaps, setGoogleMaps] = React.useState(false);
30
31  const toggleGoogleMaps = () => setGoogleMaps(value => !value);
32
33  return (
34    <ScrollView style={styles.container}>
35      <TitleSwitch
36        style={styles.switch}
37        title="Use Google Maps API"
38        value={useGoogleMaps}
39        setValue={toggleGoogleMaps}
40      />
41
42      <View style={styles.headerContainer}>
43        <Text style={styles.headerText}>Forward-Geocoding</Text>
44      </View>
45      {forwardGeocodingAddresses.map((address, index) => (
46        <SimpleActionDemo
47          key={index}
48          title={address}
49          action={() => Location.geocodeAsync(address, { useGoogleMaps })}
50        />
51      ))}
52
53      <View style={styles.headerContainer}>
54        <Text style={styles.headerText}>Reverse-Geocoding</Text>
55      </View>
56      {reverseGeocodingCoords.map((coords, index) => (
57        <SimpleActionDemo
58          key={index}
59          title={`${coords.latitude}, ${coords.longitude}`}
60          action={() => Location.reverseGeocodeAsync(coords, { useGoogleMaps })}
61        />
62      ))}
63      <SimpleActionDemo
64        title="Where am I?"
65        action={async () => {
66          const location = await Location.getCurrentPositionAsync({
67            accuracy: Location.LocationAccuracy.Lowest,
68          });
69          return Location.reverseGeocodeAsync(location.coords, { useGoogleMaps });
70        }}
71      />
72    </ScrollView>
73  );
74}
75
76const styles = StyleSheet.create({
77  container: {
78    flex: 1,
79  },
80  switch: {
81    paddingTop: 10,
82    paddingLeft: 10,
83    justifyContent: 'flex-start',
84  },
85  separator: {
86    height: 1,
87    backgroundColor: '#eee',
88    marginTop: 10,
89    marginBottom: 5,
90  },
91  headerText: {
92    fontSize: 18,
93    fontWeight: '600',
94    marginBottom: 5,
95  },
96  headerContainer: {
97    borderBottomWidth: 1,
98    borderBottomColor: '#eee',
99    marginHorizontal: 10,
100    marginBottom: 0,
101    marginTop: 30,
102  },
103  exampleText: {
104    fontSize: 15,
105    color: '#ccc',
106    marginVertical: 10,
107  },
108  examplesContainer: {
109    paddingTop: 15,
110    paddingBottom: 5,
111    paddingHorizontal: 20,
112  },
113  selectedExampleText: {
114    color: 'black',
115  },
116  resultText: {
117    padding: 20,
118  },
119  actionContainer: {
120    flexDirection: 'row',
121    alignItems: 'center',
122    justifyContent: 'center',
123    marginVertical: 10,
124  },
125  errorResultText: {
126    padding: 20,
127    color: 'red',
128  },
129  button: {
130    ...Platform.select({
131      android: {
132        marginBottom: 10,
133      },
134    }),
135  },
136});
137