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 HeatmapExample() {
8  const provider = useContext(ProviderContext);
9
10  return (
11    <View style={styles.container}>
12      <Maps.ExpoMap style={{ flex: 1, width: '100%' }} provider={provider}>
13        <Maps.Heatmap
14          points={require('../../../../assets/expo-maps/points.json')}
15          radius={20}
16          gradient={{ colors: ['#12345600', '#abcdef'], locations: [0, 1] }}
17        />
18        <Maps.Heatmap
19          points={require('../../../../assets/expo-maps/pointsWithData.json')}
20          radius={50}
21        />
22      </Maps.ExpoMap>
23    </View>
24  );
25}
26
27const styles = StyleSheet.create({
28  container: {
29    flex: 1,
30  },
31});
32