LojasProximas.js

import React, {Component} from 'react'
import { 
  StyleSheet,
  View,
  Dimensions,
  Image,
  Linking,
  Platform,
  TouchableOpacity,
  Text,
  Alert
} from 'react-native'
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'
import axios from 'axios'
import api from '../api/index.js'
import Icon from 'react-native-vector-icons/FontAwesome5'
import estiloDefault from '../estilo/defaultStyle'

const { width, height } = Dimensions.get('window')
const ASPECT_RATIO = width / height
const LATITUDE = -19.9191248
const LONGITUDE = -43.9386291
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO

export default class Lojas extends Component {
  constructor(props) {
    super(props)
    this.state = {
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      markers: [],
      storeNext: ''
    }
  }
  openRoute = address => {
    if (Platform.OS === 'ios') {
      Linking.openURL(`http://maps.apple.com/?daddr=${address}&ll=`)
    } else {
      Linking.openURL(`http://maps.google.com/?daddr=${address}&ll=`)
    }
  }
  toRadians = degrees => {
    return degrees * Math.PI / 180
  }
  sort = (x, y) => {
    if (x.distancia < y.distancia) return -1
    if (x.distancia > y.distancia) return 1
    return 0
  }
  componentDidMount() {
    navigator.geolocation.getCurrentPosition(
      position => {
        this.setState({
          region: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }
        }, _=> this.getAllLojas())
      },
      error => {
        console.warn(`Erro ao acessar a localização, código: ${error.code}, msg:  - ${error.message}`)
        this.setState({
          region: {
            latitude: LATITUDE,
            longitude: LONGITUDE,
            latitudeDelta: LATITUDE_DELTA,
            longitudeDelta: LONGITUDE_DELTA,
          }
        }, _=> this.getAllLojas())
      },
      { enableHighAccuracy: false, timeout: 3000, maximumAge: 1000 }
    )
  } 
  getAllLojas() {
    axios.get(api.getAllLojas)
    .then(response => {
      responseJson = response.data
      let lojas = []
      for (let i = 0; i < responseJson.length; i++) {
        let loja = {}
        loja.coordinates = {}
        let item = responseJson[i]
        loja.coordinates.latitude = parseFloat(item.nl_lat)
        loja.coordinates.longitude = parseFloat(item.nl_lng)
        loja.nome = item.nl_loja
        loja.endereco = item.nl_endereco
        loja.distancia = (6371 * Math.acos(Math.cos(this.toRadians(this.state.region.latitude)) 
          * Math.cos(this.toRadians(item.nl_lat)) * Math.cos(this.toRadians(item.nl_lng) 
          - this.toRadians(this.state.region.longitude)) + Math.sin(this.toRadians(this.state.region.latitude))
          * Math.sin(this.toRadians(item.nl_lat))))
        lojas.push(loja)
      }
      let storeNext = lojas.sort(this.sort)[0]
      this.setState({ 
        markers: lojas,
        storeNext
      })
    })
    .catch(error => {
      Alert.alert(`Erro ao acessar as Lojas`)
    })
  }
  setLoja = marker => {
    this.setState({
      storeNext: marker
    })
  }
  render() {
    const { nome , endereco, distancia } = this.state.storeNext
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          showsUserLocation={true}
          region={this.state.region}
          loadingEnabled={true}
          loadingIndicatorColor={estiloDefault.color}
          showsMyLocationButton={true}>
          {
            this.state.markers.map((marker, indice) => (
              <MapView.Marker
                key={indice}
                coordinate={marker.coordinates}
                title={marker.nome}
                onPress={() => this.setLoja(marker)}
              >
              <Image source={require('../img/statics/markerRede.png')}
                style={{width: 30, height: 40, resizeMode: 'contain'}}></Image>
              </MapView.Marker>
          ))
          }
        </MapView>
        {
          this.state.storeNext !== '' &&
            <TouchableOpacity onPress={() => this.openRoute(endereco)}>
              <View style={styles.cardColumn}>
                <View style={{flex: 5}}>
                  <Text style={{fontSize: 18, fontWeight: 'bold'}}>{nome}</Text>
                  <Text>{endereco}</Text>
                </View>
                <View style={{flex: 3, alignItems: 'flex-end'}}>
                  <Icon name='directions' size={45} color={estiloDefault.color}/>
                  <Text>Apx: {distancia.toFixed(2)} km</Text>
                </View>
              </View>
            </TouchableOpacity>
        }
      </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
  ...StyleSheet.absoluteFillObject,
  position: 'absolute',
  height: '100%',
  justifyContent: 'flex-end',
  alignItems: 'center'
 },
 map: {
  ...StyleSheet.absoluteFillObject,
 },
 cardColumn: {
  flexDirection: 'row',
  position: 'relative',
  bottom: 0,
  height: 90,
  borderRadius: 6,
  width: width,
  padding: 10,
  backgroundColor: 'white',
  zIndex: 100
  }
})