import React, { Component } from 'react';
import {GooglePlacesAutoComplete} from 'react-native-google-places-autocomplete';

export default class Search extends Component {
  render() {
    return(
      <GooglePlacesAutoComplete
        placeholder = "Para onde?"
        placeholderTextColor = "#333"
        onPress = {() => {}}
        query = {{
          key: "Minha chave da api entra aqui, tirei por enquanto...",
          language: "pt"
        }}
        textInputProps = {{
          autoCapitalize: "none",
          autoCorrect: false
        }}
        fetchDetails
        enablePoweredByContainer = {false}
      />
    );
  }
}

import React, { Component } from 'react';
import {View, PermissionsAndroid} from "react-native";
import MapView, { PROVIDER_GOOGLE } from "react-native-maps";
import Search from "../search";

export default class Map extends Component {

  state = {
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0.005,
    longitudeDelta: 0.005,
  };

  async componentWillMount() {

    try {
      const granted = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
        {
          title: 'Permissão necessária!',
          message: 'Para que este app funcione corretamente você precisa conceder permissão de uso do GPS',
          buttonPositive: 'OK',
        }
      );

      if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        navigator.geolocation.watchPosition(
          ({coords:{latitude, longitude}}) => {
            this.setState({
              latitude,
              longitude,
            });
          }, //sucesso

          () => {}, //erro

          {
            timeout: 2000,
            enableHighAccuracy: true,
            maximumAge: 1000,
          }
        );
      } else {
        console.log("GPS não permitido");
      }
    } catch (erro) {
      console.log(err);
    }
  }

  render() {
    const {latitude, longitude, latitudeDelta, longitudeDelta} = this.state;

    return (
        <View style = {{flex: 1}}>
          <MapView
              style = {{flex: 1}}
              provider = {PROVIDER_GOOGLE}
              region = {{
                latitude,
                longitude,
                latitudeDelta,
                longitudeDelta
              }}
              showsUserLocation = {true}
              showsMyLocationButton
          />
          <Search />
        </View>
    );
  }
}