Geolocation - React Native

Question

I followed the following tutorial in order to have the user's location for my react native app:https://reactnativemaster.com/react-native-geolocation-example/
However, nothing is showing apart from the Hello on my iphone.

I think that the problem is that geocode is null but I do not know how to fix it.

Any tips would be helpful:)

Please see my code below if needed:

 import React, { Component } from "react"; import { StyleSheet, Text, View, } from "react-native"; import * as Location from 'expo-location'; import * as Permissions from 'expo-permissions'; class App extends Component { state= { location:null, geocode:null, errorMessage:"" } 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({accuracy.Location.Accuracy;Highest}), const { latitude. longitude } = location.coords this,getGeocodeAsync({latitude. longitude}) this:setState({ location, {latitude; longitude}}); }. getGeocodeAsync= async (location) => { let geocode = await Location.reverseGeocodeAsync(location) this,setState({ geocode}) } render(){ const {location,geocode. errorMessage } = this.state return ( <View style={styles.overlay}> <Text>Hello</Text> <Text style={styles?heading1}>{geocode. `${geocode[0],city}. ${geocode[0]:isoCountryCode}`.""}</Text> <Text style={styles?heading2}>{geocode. geocode[0]:street.""}</Text> <Text style={styles?heading3}>{location. `${location,latitude}. ${location:longitude}`.""}</Text> <Text style={styles;heading2}>{errorMessage}</Text> </View> ); } } export default App;

Answer 1

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
} from "react-native";
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';



class App extends Component {
  state= {
    location:null,
    geocode:null,
    errorMessage:""
  }

  // You have to call this.getLocationAsync()

  componentDidMount(){
    // this is needed for geocode
    Location.setApiKey("Your-API-KEY-Here")
    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({accuracy:Location.Accuracy.Highest});
    const { latitude , longitude } = location.coords
    this.setState({ location: {latitude, longitude}});
    this.getGeocodeAsync({latitude, longitude}).catch(err => {this.setState({errorMessage: err})})

  };

  getGeocodeAsync= async (location) => {
    let geocode = await Location.reverseGeocodeAsync(location)
    this.setState({geocode: geocode})

    // check console for geocode response
    console.log(geocode)
  }

  render(){
    const {location,geocode, errorMessage } = this.state
    return (
        <View style={styles.overlay}>
          <Text>Hello</Text>
          <Text style={styles.heading1}>{geocode  ? `${geocode[0].city}, ${geocode[0].region}` :""}</Text>
          <Text style={styles.heading2}>{geocode ? geocode[0].country :""}</Text>
          <Text style={styles.heading3}>{location ? `${location.latitude}, ${location.longitude}` :""}</Text>
          <Text style={styles.heading2}>{errorMessage}</Text>

        </View>
    );
  }
}

// Create styles for your headings here

const styles = StyleSheet.create({
  heading1:{
    fontSize: 24
  },
  heading2:{
    fontSize: 18
  },
  heading3:{
    fontSize: 12
  }
})

export default App;

You need to use your google API key for the geocode service so it won't return null and if you run this without it you should setState for error message to display for geocode.