react native react-native-geocoding address will not render

Question

i am creating an app to display user add using react native

after getting user permission and latitude,longitude using expo i used react-native-geocoding to turn cords to address but address would not display

expo permission code

import React from 'react';
import { Alert,Platform,StyleSheet, Text, View } from 'react-native';
import { Constants, Location, Permissions } from 'expo';

import AppStackNav from '../party/src/nav/appStackNav';


import Geocoder from 'react-native-geocoding';

Geocoder.init('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');

export default class App extends React.Component {
  state = {
    location: null,
    errorMessage: null,
    addressComponent: null,
  };

  componentWillMount() {
    this._getLocationAsync();
  } 

  _getLocationAsync = async () => {
    let { status } = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      this.setState({
        errorMessage: 'Permission to access location was denied',
      });
    }
    let location = await Location.getCurrentPositionAsync({
      enableHighAccuracy: true,
    });
    this.setState({ location  });
      let lat = this.state.location.coords.latitude;
      let long = this.state.location.coords.longitude;

      Geocoder.from(lat,long).then(json => 
        {
        var addressComponent = json.results[0].formatted_address;
        this.setState({addressComponent})

          // Alert.alert(this.state.addressComponent)
      }) 
  }

then attempt to display the address while passing as a prop

import React, {Component} from 'react';
import {View,Text,StyleSheet,FlatList} from 'react-native'

import styles from '../style/styles';

class SetConn extends Component {
    render(){
        return(
            <View>

                     <Text style={styles.addyComp}>{this.props.addressComponent}</Text> 
            </View>
        );
    }
}


export default SetConn;

what does the render method return in App? One thought is that it doesn't pass down the prop correctly. — Noah Allen
We need to see the whole of the render method so we know everything related to the question — Noah Allen
well as far as the SetCon Component that is all being render and this is the rest of the code for the app.js — vlone kellz
this.setState({ location }); let lat = this.state.location.coords.latitude; let long = this.state.location.coords.longitude; Geocoder.from(lat,long).then(json => { var addressComponent = json.results[0].formatted_address; this.setState({addressComponent}) }) } render() { console.log(" waiting. ."); if (this.state.errorMessage) { console.log (this.state.errorMessage) } else if (this.state.location) { console.log(this.state.addressComponent) } return ( <AppStackNav /> ); } } — vlone kellz

Harry Moreno Harry Moreno · Accepted Answer · 2018-08-26T23:49:06

the react-native-geocoder api works from human readable address -> latitude longitude.

Use google reverse geocoding instead.

react native react-native-geocoding address will not render

1 Answers