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 PolylinesExample() {
8  const provider = useContext(ProviderContext);
9  return (
10    <View style={styles.container}>
11      <Maps.ExpoMap style={{ flex: 1, width: '100%' }} provider={provider}>
12        <Maps.Polyline
13          points={[
14            { latitude: 51.5, longitude: -0.13 },
15            { latitude: 48.86, longitude: 2.34 },
16            { latitude: 50.9, longitude: 4.375 },
17            { latitude: 48.16, longitude: 11.5 },
18            { latitude: 52.5, longitude: 13.5 },
19          ]}
20          width={4}
21          pattern={[
22            { type: 'stroke', length: 10 },
23            { type: 'stroke', length: 0 },
24            { type: 'stroke', length: 10 },
25            { type: 'gap', length: 10 },
26            { type: 'stroke', length: 0 },
27            { type: 'gap', length: 10 },
28          ]}
29          color="red"
30          capType="butt"
31        />
32      </Maps.ExpoMap>
33    </View>
34  );
35}
36
37const styles = StyleSheet.create({
38  container: {
39    flex: 1,
40  },
41});
42