title: React native geocoding not rendering data on first try
body: <p>I am building and Android app with React native, using Expo. My users will write adresses and I have to find the coordinates of this in order to display a route on a map.</p>
  <p>As I saw it works correctly, but not on the first attempt. When I press the button which navigates to the MapScreen, the correct values are generated, but not rendered on screen.</p>
  <p>When I make back and try again without any change, it will render.</p>
  <p>Why only on second attempt renders the data? Is the Geocoder function called after the render or what is the problem?</p>
  <pre><code>import MapView, { Marker } from &quot;react-native-maps&quot;;
  import MapViewDirections from &quot;react-native-maps-directions&quot;;
  import React, {useState, useEffect} from 'react';
  import * as Location from 'expo-location'
  import {Alert, StatusBar, StyleSheet, Text, View} from 'react-native';
  import { mapStyles } from '../Styles';
  import Geocoder from 'react-native-geocoding';
  
  var distance = 0;
  
  var originDir = {
    longitude : null,
    latitude : null,
  };
  
  var destinationDir = {
    longitude: null,
    latitude: null,
  };
  
  const GOOGLE_MAPS_APIKEY = '';
  
  Geocoder.init(GOOGLE_MAPS_APIKEY);
  
  function getDistance(param){
    distance = param;
  }
  
  const showMapScreen = ({route, navigation}) =&gt; {
    const {origin} = route.params;
    Geocoder.from(origin)
    .then(json =&gt; {
      var destination = json.results[0].geometry.location;
      destinationDir.longitude = destination.lng;
      destinationDir.latitude = destination.lat;
    })
    .catch(error =&gt; console.log(error));
  
    const [location, setLocation] = useState(null);
    const [errorMsg, setErrorMsg] = useState(null);
    useEffect(() =&gt; {
          (async () =&gt; {
            var { status } = await Location.requestForegroundPermissionsAsync();
            if (status !== 'granted') {
              setErrorMsg('Permission to access location was denied');
              return;
            }
      
            var location = await Location.getCurrentPositionAsync({});
            setLocation(location);
            originDir.longitude = location.coords.longitude;
            originDir.latitude = location.coords.latitude;
          })();
        }, []);
  
    return (
      &lt;View style={mapStyles.container}&gt;
          &lt;MapView style={[StyleSheet.absoluteFillObject, {elevation:-1, position:&quot;absolute&quot;}]} initialRegion={{longitude : originDir.longitude, latitude : originDir.latitude, latitudeDelta:0, longitudeDelta:0}}  provider={MapView.PROVIDER_GOOGLE}&gt;
            &lt;MapViewDirections strokeWidth = {5} strokeColor=&quot;blue&quot; lineDashPattern={[1]} origin={originDir} destination={destinationDir} apikey = {GOOGLE_MAPS_APIKEY} onReady={result =&gt; {getDistance(result.distance)}}&gt;&lt;/MapViewDirections&gt;
            &lt;Text style={{top:100, elevation:1, position:&quot;absolute&quot;, width:70, height:40, fontSize:20}}&gt;Distance: {distance} km&lt;/Text&gt;
          &lt;/MapView&gt;
          &lt;StatusBar style=&quot;auto&quot;&gt;&lt;/StatusBar&gt;
      &lt;/View&gt;);
  }
  
  export {showMapScreen};
  </code></pre>
  <p>Thanks for the response!</p>