1import * as Maps from 'expo-maps';
2import { MapTypes } from 'expo-maps/build/Map.types';
3import React, { useContext, useState } from 'react';
4import { StyleSheet, View } from 'react-native';
5import DropDownPicker from 'react-native-dropdown-picker';
6
7import ProviderContext from '../context/ProviderContext';
8
9export default function MapTypesExample() {
10  const provider = useContext(ProviderContext);
11
12  const [mapType, setMapType] = useState<MapTypes>('normal');
13  const [open, setOpen] = useState<boolean>(false);
14  return (
15    <View style={styles.container}>
16      <Maps.ExpoMap style={{ flex: 1, width: '100%' }} provider={provider} mapType={mapType} />
17      <View style={{ padding: 20 }}>
18        <DropDownPicker
19          items={[
20            { label: 'normal', value: 'normal' },
21            { label: 'satellite', value: 'satellite' },
22            { label: 'hybrid', value: 'hybrid' },
23            { label: 'terrain', value: 'terrain' },
24          ]}
25          value={mapType}
26          setValue={(value) => setMapType(value as any as MapTypes)}
27          multiple={false}
28          open={open}
29          setOpen={() => setOpen(!open)}
30          placeholder={mapType}
31        />
32      </View>
33    </View>
34  );
35}
36
37const styles = StyleSheet.create({
38  container: {
39    flex: 1,
40  },
41});
42