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.

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