Skip to content
This repository has been archived by the owner on Sep 4, 2021. It is now read-only.

Cannot read property 'geocodePosition' of undefined #62

Open
Mate38 opened this issue Oct 24, 2017 · 5 comments
Open

Cannot read property 'geocodePosition' of undefined #62

Mate38 opened this issue Oct 24, 2017 · 5 comments

Comments

@Mate38
Copy link

Mate38 commented Oct 24, 2017

This is my code:

import React, { Component } from 'react';
import { 
  AppRegistry, 
  View, 
  Text
} from 'react-native';
import Geocoder from 'react-native-geocoder'; // 0.5.0

Geocoder.apiKey = '__API__KEY__';

export default class teste47 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      latitude: null,
      longitude: null,
      place: 'Localizando endereço...',
      error: null,
    };
  }

  componentDidMount() {
   navigator.geolocation.getCurrentPosition(
    position => {
      this.setState(
        {
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        },
        () => {
          Geocoder.geocodePosition({
            lat: this.state.latitude,
            lng: this.state.longitude,
          }).then(res => {
            this.setState({
              place: res[0].formattedAddress,
            });
          });
        }
      );
    },
    error => this.setState({ error: error.message }),
    { enableHighAccuracy: true, timeout: 20000 }
  );
 }

  render() {
    return (
      <View style={{ flexGrow: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Latitude: {this.state.latitude}</Text>
        <Text>Longitude: {this.state.longitude}</Text>
        <Text>{this.state.place.toString()}</Text>
        {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
      </View>
    );
  }
}

AppRegistry.registerComponent('teste47', () => teste47);

I created the project with react-native init I added the <uses-permission android: name = "android.permission.ACCESS_FINE_LOCATION" /> to AndroidManifest.xml and I used the react-native link to link.

But when I run the project this returns latitude and longitude to then display an error screen:

screenshot_1508871624

I really have not found the error, what can it be?

@Deniscapp
Copy link

Having the same problem here!

@Mate38
Copy link
Author

Mate38 commented Nov 1, 2017

I ended up giving up using the library, through the help I received in stackoverflow, I solved my problem by performing the requisition for google api:

componentWillMount() {
  navigator.geolocation.getCurrentPosition(
  (position) => {
    this.setState({
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      error: null,
    }, () => this.getGeocode()); // call the api after getCurrentPosition is finished
  },
   (error) => this.setState({ error: error.message }),
   { enableHighAccuracy: true, timeout: 20000 },
 );

}
getGeocode() {
 axios.get('https://maps.googleapis.com/maps/api/geocode/json?address='+ this.state.latitude +','+ this.state.longitude +'&key=__API_KEY__') // be sure your api key is correct and has access to the geocode api
.then(response => {
  console.log(response);
    this.setState({
        place: response.data.results[0].formatted_address // access from response.data.results[0].formatted_address
    })
 }).catch((error) => { // catch is called after then
   this.setState({ error: error.message })
 });
}

But I still want to find out why I can not do it with the library.

@SaifulBashar
Copy link

Facing same problem

@Vnicius
Copy link

Vnicius commented Jan 27, 2018

Run react-native link react-native-geocoder and rebuild work for me

@ankitsinghania94
Copy link

Better to link manually

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants