Geocoding issue in react-native-geocoding

Question

Error Image I am trying to get the address(reverse Geocode) from the latitude & longitude values in react native. But getting the above error.

 fetch('https://maps.googleapis.com/maps/api/geocode/json?address=' + 41.89 + ',' + 12.49 + '&key=' + myApiKey)
        .then((response) => response.json())
        .then((responseJson) => {
            console.log('ADDRESS GEOCODE is BACK!! => ' + JSON.stringify(responseJson));
        })
        .catch(error => console.log(error));

and

Geocoder.from(41.89, 12.49)
            .catch(error => console.log(error))
            .then(json => {
                console.log("json",json);
                var addressComponent = json.results[0].address_components[0];
                console.log("addressComponent",addressComponent);
            });

which belongs to react-native-geocoding giving error

enter image description here

Pagemag Pagemag · Accepted Answer · 2021-05-26T01:36:52

How are you using those code snippets in your code?

I tried to check on my end and it is working properly.

Here's a sample code and code snippet below for the fetch:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

class MapApp extends Component {
  componentDidMount = () => {
    fetch(
      'https://maps.googleapis.com/maps/api/geocode/json?address=' +
        41.89 +
        ',' +
        12.49 +
        '&key=' +
        'YOUR_KEY'
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(
          'ADDRESS GEOCODE is BACK!! => ' + JSON.stringify(responseJson)
        );
      })
      .catch((error) => console.log(error));
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
        </MapView>
      </View>
    );
  }
}

export default MapApp;

And here's the sample code and code snippet for react-native-geocoding:

import React, { Component } from 'react';
import { Text, View, StyleSheet, Dimensions } from 'react-native';
import MapView from 'react-native-maps';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  map: {
    width: Dimensions.get('window').width,
    height: Dimensions.get('window').height,
  },
});

class MapApp extends Component {
  componentDidMount = () => {
    fetch(
      'https://maps.googleapis.com/maps/api/geocode/json?address=' +
        41.89 +
        ',' +
        12.49 +
        '&key=' +
        'YOUR_KEY'
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log(
          'ADDRESS GEOCODE is BACK!! => ' + JSON.stringify(responseJson)
        );
      })
      .catch((error) => console.log(error));
  };

  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={styles.map}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}>
        </MapView>
      </View>
    );
  }
}

export default MapApp;

Geocoding issue in react-native-geocoding

1 Answers