Criando nosso App para Listar os Locais Próximos de um ponto com React Native

No artigo anterior Calculando a distância entre dois pontos com .Net 6 criamos nossa API para listar os locais próximos de um ponto por meio de sua latitude e longitude, na listagem é possível visualizar a distância em metros do ponto.

Fernando Guerra

3 min

Neste artigo iremos criar nosso Aplicativo que irá consumir a API e mostrar em um mapa e em uma listagem os pontos próximos como na imagem abaixo.

Para este exemplo iremos usar:

Visual Studio Code

Expo

Android Studio

Abra o projeto da API, altere o IP no arquivo launchSettings.json, rode a API e acesse no emulador a documentação da sua API

Abra o Visual Studio e abra o prompt de comand clicando Ctrl + ` ou menu View -> Terminal

Digite expo init "nome do projeto"

Escolha Blank como na imagem abaixo

Aguarde a criação do projeto

Ao terminar abra a pasta do projeto com cd ipoint e digite code para abrir o visual studio code com o seu projeto como a imagem abaixo

Abra o terminal e abra o seu emulador do android

Vai abrir seu emulador

No terminal do seu Visual Studio Code digite expo start

Digite a para abrir no emulador sua aplicação

Altere o texto no arquivo App.js e verifique se foi alterado no emulador.

Em nosso projeto teremos 3 passos:

Pegar a nossa localização

Fazer a chamada para nossa api

Mostrar os dados na tela com FlatList

Tudo rodando vamos baixar as dependências do nosso projeto :

Para encontra a nossa localização iremos usar o pacote expo-location

Ative o gps do Emulador, no menu lateral clique nos ... no menu ao lado do embulador

No campo de pesquise digite o endereço que deseja e clique em salvar ponto

Pronto, você definiu a latitude e longitude que será usada em nosso exemplo

Bora codar

Em nosso arquivo App.js altere para o código abaixo


          
            import React, { useState, useEffect } from 'react';
          
          
            import { Platform, Text, View, StyleSheet, ActivityIndicator, Alert } from 'react-native';
          
          
            import * as Location from 'expo-location';
          
          
            
          
          
            export default function App() {
          
          
              const [location, setLocation] = useState(null);
          
          
              const [errorMsg, setErrorMsg] = useState(null);
          
          
              const [loading, setLoading] = useState(true);
          
          
            
          
          
              useEffect(() => {
          
          
                (async () => {
          
          
                 if (Platform.OS !== "web") {
          
          
                    const { status } = await Location.requestForegroundPermissionsAsync();
          
          
                    
          
          
                    if (status !== "granted") {
          
          
                      Alert.alert("Insufficient permissions!")
          
          
                      return;
          
          
                    }
          
          
                  }
          
          
            
          
          
                  let location = await Location.getCurrentPositionAsync({accuracy: Location.Accuracy.Highest, maximumAge: 10000});
          
          
                  setLocation(location);
          
          
                  setLoading(false);
          
          
                })();
          
          
              }, []);
          
          
            
          
          
              return (
          
          
                <View style={styles.container}>
          
          
                  {
          
          
                    loading ? <ActivityIndicator size="small" color="#0000ff" /> : JSON.stringify(location)
          
          
                  }
          
          
                </View>
          
          
              );
          
          
            }
          
          
            
          
          
            const styles = StyleSheet.create({
          
          
              container: {
          
          
                flex: 1
          
          
              }
          
          
            })

Agora em nosso emulador esta aparecendo a latitude e longitude do ponto que configuramos anteriormente

Passo 1 feito, bora para o passo 2, iremos chamar a nossa api passando a latitude e longitude e a API irá retornar nos locais mais próximos.

Bora criar nosso método buscarLocais recebendo a latitude e longitude e iremos chamar a nossa API usando a biblioteca fetch


          
            useEffect(() => {
          
          
                (async () => {
          
          
                  if (Platform.OS !== "web") {
          
          
                    const { status } = await Location.requestForegroundPermissionsAsync();
          
          
            
          
          
                    if (status !== "granted") {
          
          
                      Alert.alert("Insufficient permissions!")
          
          
                      return;
          
          
                    }
          
          
                  }
          
          
            
          
          
                  let location = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Highest, maximumAge: 10000 });
          
          
                  buscarLocais(location.coords.latitude, location.coords.longitude)
          
          
                  setLoading(false);
          
          
                })();
          
          
              }, []);
          
          
            
          
          
              const buscarLocais = (latitude, longitude) => {
          
          
                const url = `http://172.18.208.1:5128/api/Local?Latitude=${latitude}&Longitude=${longitude}`
          
          
            
          
          
                fetch(url).then(response => {
          
          
                    return response.json();
          
          
                  }).then(data => {
          
          
                    console.log(data);
          
          
                })
          
          
              }

Passo 2 executado, último passo mas não menos importante é mostrar os locais na lista, para isto iremos usar o FlatList juntamente com o List do react-native-paper

yarn add react-native-paper

Ao final nosso código irá ficar como o código abaixo implementando o FlatList e ListItem


          
            import React, { useState, useEffect } from 'react';
          
          
            import { Platform, Text, View, StyleSheet, ActivityIndicator, Alert, FlatList } from 'react-native';
          
          
            import { List } from 'react-native-paper';
          
          
            import * as Location from 'expo-location';
          
          
            
          
          
            export default function App() {
          
          
              const [locais, setLocais] = useState(null);
          
          
              const [loading, setLoading] = useState(true);
          
          
            
          
          
              useEffect(() => {
          
          
                (async () => {
          
          
                  if (Platform.OS !== "web") {
          
          
                    const { status } = await Location.requestForegroundPermissionsAsync();
          
          
            
          
          
                    if (status !== "granted") {
          
          
                      Alert.alert("Insufficient permissions!")
          
          
                      return;
          
          
                    }
          
          
                  }
          
          
            
          
          
                  let location = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Highest, maximumAge: 10000 });
          
          
                  buscarLocais(location.coords.latitude, location.coords.longitude)
          
          
                  setLoading(false);
          
          
                })();
          
          
              }, []);
          
          
            
          
          
              const buscarLocais = (latitude, longitude) => {
          
          
                const url = `http://172.18.208.1:5128/api/Local?Latitude=${latitude}&Longitude=${longitude}&metros=3000`
          
          
            
          
          
                fetch(url).then(response => {
          
          
                  return response.json();
          
          
                }).then(data => {
          
          
                  setLocais(data);
          
          
                })
          
          
              }
          
          
            
          
          
              return (
          
          
                <View style={styles.container}>
          
          
                  {
          
          
                    loading ? <ActivityIndicator size="small" color="#0000ff" /> : <FlatList
          
          
                      data={locais}
          
          
                      renderItem={({ item }) => (
          
          
                        <List.Item
          
          
                          title={`${item.nome} - ${item.distancia.toString().split('.', 1)[0]}m`}
          
          
                          description={item.endereco}
          
          
                        />
          
          
                      )} />
          
          
                  }
          
          
                </View>
          
          
              );
          
          
            }
          
          
            
          
          
            const styles = StyleSheet.create({
          
          
              container: {
          
          
                flex: 1
          
          
              }
          
          
            })

E em nosso emulador a listagem dos locais com seu nome, endereço e distancia

Espero que tenha gostado

Código fonte github

Para receber mais conteúdo inscreva-se no canal e siga nas redes sociais

Vamos que vamos

Learn

Support

More Options