0A8FMdKM

1import React, { useEffect, useState} from 'react';
2import { StyleSheet, Button, View} from 'react-native';
3import MapView, {Marker, MAP_TYPES, UrlTile } from 'react-native-maps';
4import * as Permissions from 'expo-permissions'
5import api from "./src/axios"
6
7const helpers = [
8	.... dados simulados de localização
9]
10
11export default function App() {
12  const region = {
13    latitude: 0,
14    longitude: 0,
15    latitudeDelta: 0.04,
16    longitudeDelta: 0.05,
17  }
18  const [results, setResults] = useState([])
19
20  const renderMarkers = () => {  
21    console.log("render markers _____")
22    getHelpers()
23    return results.map((helpers, i) => (
24      <Marker 
25        key={i} 
26        title={helpers.properties.nome} 
27        coordinate={
28          { 
29            latitude: helpers.geometry.coordinates[1], 
30            longitude: helpers.geometry.coordinates[0]
31          }
32        }
33      />
34    ))
35  }
36
37  const getHelpers = async () => {
38    const {data} = await api.get('helper')
39    console.log('api')
40    setResults(data)
41  }
42
43  return (
44    <View style={styles.container}>
45      <MapView
46        style= {styles.map}
47        region={region}
48        showsUserLocation={true}
49        provider={null}
50        mapType={MAP_TYPES.STANDARD}
51        >
52        {renderMarkers()}
53      </MapView>
54      <View
55        style={{
56            position: 'absolute',//use absolute position to show button on top of the map
57            bottom: '0%', //for center align
58            margin: 12,
59        }}
60      >
61        <Button title="Botao" />
62      </View>      
63    </View>
64  );
65}
66
67const styles = StyleSheet.create({
68  container: {
69    flex: 1
70  },
71  map: {
72    height: '100%',
73    width: '100%',
74  },
75});