Mapas e Rotas com React Native - #5 Place AutoComplete

Nesse tutorial aprenderemos como buscar os locais digitados pelo usuário utilizando o Google Places AutoComplete.

Buscando locais com Google API

Vamos começar instalando o módulo:

npm install react-native-google-places-autocomplete --save
expo start --android

App.js

Vamos importar o Google Places AutoComplete e rodar o código que irá chamar a base de dados de endereços do Google.

import config from './config';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';

//Dentro do return
<View style={css.search}>
  <GooglePlacesAutocomplete
          placeholder='Para onde vamos?'
          onPress={(data, details = null) => {
          setDestination({
              latitude: details.geometry.location.lat,
              longitude: details.geometry.location.lng,
              latitudeDelta: 0.000922,
              longitudeDelta: 0.000421
          });
      }}
      query={{
          key: config.googleApi,
          language: 'pt-br',
      }}
      enablePoweredByContainer={false}
      fetchDetails={true}
      styles={{listView:{height:100}}}
  />
</View>

Posteriormente precisamos acessar o Google Developers Console, criar um projeto e ativar a lib Places API e Directions API. Repare que para ter acesso aos recursos dessa API você precisa ter uma conta premium no Google.

Assim que registrar as libs, pegue a API Key da sua aplicação.

config/index.json

Vamos criar o diretório config e dentro desse diretório o arquivo index.json que receberá os dados de configuração do nosso app.

{
  "googleApi": "SUA_API_DO_GOOGLE_AQUI"
}

Por hoje é só turma. Sucesso nos códigos e na vida!

Precisando de assessoria? webdesignemfoco@gmail.com