1import * as Maps from 'expo-maps';
2import React, { useContext } from 'react';
3import { StyleSheet, View } from 'react-native';
4
5import ProviderContext from '../context/ProviderContext';
6
7export default function OverlaysExample() {
8  const provider = useContext(ProviderContext);
9  return (
10    <View style={styles.container}>
11      <Maps.ExpoMap
12        style={styles.map}
13        provider={provider}
14        initialCameraPosition={{
15          target: {
16            latitude: 40.7357,
17            longitude: -74.1724,
18          },
19          zoom: 12,
20        }}>
21        <Maps.Overlay
22          bounds={{
23            southWest: { latitude: 40.712216, longitude: -74.22655 },
24            northEast: { latitude: 40.773941, longitude: -74.12544 },
25          }}
26          icon={require('../../../../assets/expo-maps/newark_nj_1922.jpeg')}
27        />
28      </Maps.ExpoMap>
29    </View>
30  );
31}
32
33const styles = StyleSheet.create({
34  container: {
35    flex: 1,
36  },
37  map: {
38    flex: 1,
39    width: '100%',
40  },
41});
42