1import * as Maps from 'expo-maps';
2import { Platform } from 'expo-modules-core';
3import React, { useContext, useState } from 'react';
4import { StyleSheet, View } from 'react-native';
5
6import SwitchContainer from '../components/SwitchContainer';
7import ProviderContext from '../context/ProviderContext';
8
9export default function ControlsExample() {
10  const provider = useContext(ProviderContext);
11
12  const [showZoomControls, setShowZoomControls] = useState<boolean>(false);
13  const [showCompass, setShowCompass] = useState<boolean>(false);
14  const [showMyLocationButton, setShowMyLocationButton] = useState<boolean>(false);
15  const [showLevelPicker, setShowLevelPicker] = useState<boolean>(false);
16  const [showMapToolbar, setShowMapToolbar] = useState<boolean>(false);
17
18  return (
19    <View style={styles.mapContainer}>
20      <Maps.ExpoMap
21        style={{ flex: 1, width: '100%' }}
22        provider={provider}
23        showZoomControls={showZoomControls}
24        showCompass={showCompass}
25        showMyLocationButton={showMyLocationButton}
26        showLevelPicker={showLevelPicker}
27        showMapToolbar={showMapToolbar}
28        enableRotateGestures
29      />
30      <View style={{ padding: 20 }}>
31        {Platform.OS === 'android' && (
32          <SwitchContainer
33            title="Show zoom controls"
34            value={showZoomControls}
35            onValueChange={() => setShowZoomControls(!showZoomControls)}
36          />
37        )}
38        <SwitchContainer
39          title="Show compass"
40          value={showCompass}
41          onValueChange={() => setShowCompass(!showCompass)}
42        />
43        <SwitchContainer
44          title="Show my location button"
45          value={showMyLocationButton}
46          onValueChange={() => setShowMyLocationButton(!showMyLocationButton)}
47        />
48        <SwitchContainer
49          title="Show level picker"
50          value={showLevelPicker}
51          onValueChange={() => setShowLevelPicker(!showLevelPicker)}
52        />
53        {Platform.OS === 'android' && (
54          <SwitchContainer
55            title="Show map toolbar"
56            value={showMapToolbar}
57            onValueChange={() => setShowMapToolbar(!showMapToolbar)}
58          />
59        )}
60      </View>
61    </View>
62  );
63}
64
65const styles = StyleSheet.create({
66  mapContainer: {
67    flex: 1,
68  },
69});
70