devfd / react-native-geocoder

geocoding services for react native
MIT License
429 stars 178 forks source link

Cannot read property 'geocodePosition' of undefined #62

Open Mate38 opened 7 years ago

Mate38 commented 7 years ago

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 commented 7 years ago

Having the same problem here!

Mate38 commented 7 years ago

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 commented 7 years ago

Facing same problem

Vnicius commented 6 years ago

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

ankitsinghania94 commented 6 years ago

Better to link manually