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 PolygonsExample() {
8  const provider = useContext(ProviderContext);
9  return (
10    <View style={styles.container}>
11      <Maps.ExpoMap style={{ flex: 1, width: '100%' }} provider={provider}>
12        <Maps.Polygon
13          points={[
14            { latitude: 52, longitude: 13 },
15            { latitude: 47, longitude: 11 },
16            { latitude: 63, longitude: 4 },
17            { latitude: 49, longitude: 22 },
18          ]}
19        />
20        <Maps.Polygon
21          points={[
22            { latitude: 39, longitude: 3 },
23            { latitude: 33, longitude: 2 },
24            { latitude: 44, longitude: 22 },
25          ]}
26          strokeWidth={4}
27          fillColor="purple"
28          strokeColor="#FF0000"
29        />
30        <Maps.Polygon
31          points={[
32            { latitude: 65, longitude: -5 },
33            { latitude: 37, longitude: -11 },
34            { latitude: 47, longitude: 5 },
35          ]}
36          strokePattern={[
37            { type: 'stroke', length: 20 },
38            { type: 'gap', length: 10 },
39          ]}
40        />
41      </Maps.ExpoMap>
42    </View>
43  );
44}
45
46const styles = StyleSheet.create({
47  container: {
48    flex: 1,
49  },
50});
51