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