Mapa e hooks

Mapa.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow
 */

import React, { useState, useEffect } from 'react';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import * as geolib from 'geolib';

import {
  Container, Header, Footer, Info, Mapa, Poligono, Button,
} from './styles';

type Coordenadas = {
  latitude: number,
  longitude: number,
  latitudeDelta: Number,
  longitudeDelta: number,
}

type Navigator = {
  geolocation: Object,
}

type Props = {
  initialRegion: Coordenadas,
  region: Coordenadas,
  navigator: Navigator,
}

export default function Map({ initialRegion, region } : Props) {
  const [coordenadas, setCoordenadas] = useState([]);
  const [creating, setCreating] = useState(false);
  const [area, setArea] = useState(0);
  const [manual, setManual] = useState(false);

  function handlePositionReceived({ coords }) {
    const { latitude, longitude } = coords;
    const coordenada = {
      latitude,
      longitude,
      date: Date.now(),
      point: true,
    };
    if (manual) {
      return;
    }
    setCoordenadas([...coordenadas, coordenada]);
  }

  function handlerError(error) {
    console.tron.log(error);
  }

  useEffect(() => {
    // const calculoArea = geolib.getAreaOfPolygon(coordenadas) / 10000;
    // setArea(calculoArea.toFixed(2));
    const watchId = navigator.geolocation.watchPosition(handlePositionReceived, handlerError, {
      enableHighAccuracy: true,
      timeout: 2000,
      maximumAge: 5000,
      distanceFilter: 0.5,
    });
    return () => navigator.geolocation.clearWatch(watchId);
  }, []);

  function onPress(e) {
    if (creating === false || manual === false) {
      return;
    }
    const { latitude, longitude } = e.nativeEvent.coordinate;
    const coordenada = {
      latitude,
      longitude,
      date: Date.now(),
      point: true,
    };
    setCoordenadas([...coordenadas, coordenada]);
  }

  function onPressBack() {
    const coords = [...coordenadas];
    coords.splice(coords.length - 1, 1);
    setCoordenadas([...coords]);
  }

  function onPressClear() {
    setCoordenadas([]);
    setCreating(false);
  }

  function onTracking() {
  }

  function onStartPerimeter() {
    setCreating(true);
    setManual(false);
    onTracking();
  }

  function onStartDrawing() {
    setManual(true);
    setCreating(true);
  }

  function RenderPolygon() {
    if (coordenadas.length > 0) {
      return (<Poligono coordinates={coordenadas} />);
    }
    return (null);
  }

  return (
    <Container>
      <Mapa
        onPress={onPress}
        showsUserLocation
        initialRegion={initialRegion}
        region={region}
      >
        {RenderPolygon()}
      </Mapa>
      <Header>
        <Info>
          Área: {area} ha
        </Info>
      </Header>
      <Footer>
        <Button onPress={() => onPressClear()}>
          {creating
            ? <Icon name="delete" color="#d01919" size={25} />
            : (null)
          }
        </Button>
        <Button onPress={() => onPressBack()}>
          {creating
            ? <Icon name="undo" color="#c7df04" size={25} />
            : (null)
          }
        </Button>
        <Button onPress={() => onStartPerimeter()}>
          {creating
            ? <Icon name="check" color="#21ae0b" size={25} />
            : <Icon name="go-kart-track" color="#c9e6ec" size={25} />
          }
        </Button>
        <Button onPress={() => onStartDrawing()}>
          {creating
            ? (null)
            : <Icon name="shape-polygon-plus" color="#21ae0b" size={25} />
          }
        </Button>
      </Footer>
    </Container>
  );
}