kiwicom/react-native-reverse-geocode

@kiwicom/react-native-reverse-geocode

Thin wrapper over MapKit's MKLocalSearch and Geocoder's getFromLocationName.

Disclaimer

This is still a work in progress and is suited to one specific usecase.

This project is no longer being actively maintained by Kiwi.com. Feel free to provide us with PR's if you have any issues, and we will see to having the PR's merged.

Getting started

$ npm install @kiwicom/react-native-reverse-geocode --save

Mostly automatic installation

$ react-native link @kiwicom/react-native-reverse-geocode

Manual installation

iOS

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
2. Go to node_modules ➜ @kiwicom/react-native-reverse-geocode and add RNReverseGeocode.xcodeproj
3. In XCode, in the project navigator, select your project. Add libRNReverseGeocode.a to your project's Build Phases ➜ Link Binary With Libraries
4. Run your project (Cmd+R)<

Android

1. Open up android/app/src/main/java/[...]/MainApplication.java

• Add import com.kiwi.reversegeocode.RNReverseGeocodePackage; to the imports at the top of the file
• Add new RNReverseGeocodePackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':@kiwicom/react-native-reverse-geocode'
   project(':@kiwicom/react-native-reverse-geocode').projectDir = new File(rootProject.projectDir, 	'../node_modules/@kiwicom/react-native-reverse-geocode/android')
   

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

     compile project(':@kiwicom/react-native-reverse-geocode')
   

Usage

import RNReverseGeocode from "@kiwicom/react-native-reverse-geocode";

const region = {
  latitude: 50,
  longitude: 14,
  latitudeDelta: 0.01,
  longitudeDelta: 0.01
};

const searchText = "Charles";

RNReverseGeocode.searchForLocations(
  this.props.searchText,
  this.props.region,
  (err, res) => {
    console.log({
      error: err,
      addresses: res
    });
  }
);

and you should get similar results (on iOS):

{
  error: null,
  addresses: [
    {
      name: "Prague Bridge",
      location: {longitude: 14.411334693431856, latitude: 50.08649403063166},
      address: "Charles Bridge, Karlův most, 118 00 Prague, Czech Republic"
    },
    {
      name: "Sheraton Prague Charles Square Hotel",
      location: {longitude: 14.422428309917, latitude: 50.077311685646},
      address: "Žitná 561/8, 120 00 Prague, Czech Republic"
    },
    {
      name: "Charles Bridge Palace",
      location: {longitude: 14.415033459663391, latitude: 50.08505182184114},
      address: "Anenské náměstí 1, 110 00 Praha, Česká republika"
    },
    {
      name: "Charles University",
      location:  {longitude: 14.420802368359185, latitude: 50.0843581717817},
      address: "Opletalova 26, 110 00 Prague, Czech Republic"
    },
    {
      name: "Hotel Charles Central",
      location: {longitude: 14.4520895183086, latitude: 50.0933086545776},
      address: "Thámova 117/26, 186 00 Prague, Czech Republic"
    },
    {
      name: "Moods Charles Bridge",
      location: {longitude: 14.414653540861101, latitude: 50.084306327469044},
      address: "Náprstkova 6, 110 00 Prague, Czech Republic"
    },
    {
      name: "Charles",
      location: {longitude: 14.405249099444005, latitude: 50.08762292985475},
      address: "Josefská 1, 118 00 Prague, Czech Republic"
    },
    {
      name: "Archibald At the Charles Bridge",
      location:  {longitude: 14.408739869235935, latitude: 50.085910196031264},
      address: "Na Kampě 15, 118 00 Prague, Czech Republic"
    },
    {
      name: "Charles Bridge Restaurant",
      location: {longitude: 14.413779917788725, latitude: 50.08589906996886},
      address: "Smetanovo nábřeží 195, 110 00 Prague, Czech Republic"
    },
    {
      name: "Muzeum Karlova mostu",
      location: {longitude: 14.413869380950928, latitude: 50.08649403063166},
      address: "Křižovnické náměstí 3, 110 00 Prague, Czech Republic"
    }
  ]
}

License

See License

react-native-reverse-geocode's Issues

Sometimes duplicate results are returned on Android

This occurs when you search for a landmark nearby, and type the name of that landmark entirely.
The reason is that on Android two searches are performed, and if the first "localized" search returns less than 10 items, then another "remote" search is performed which also returns that result.
There should be some filtering of duplicates here.

Error in function searchForLocations, undefined. Library still supported?

Hello,

While attempting to use your library in React Native, as shown in the example, I received the below error message:

Cannot read property 'searchText' of undefined
  Evaluating App.js
  Loading App.js
TypeError: Cannot read property 'searchText' of undefined
    at Object.eval (App.js.js:14:14

    at eval (App.js.js

    at eval (App.js.js

    at eval (<anonymous>)
    at [snack internals]
    at Object.a ([snack internals]
    at e.evaluate ([snack internals]
    at Ze ([snack internals]
    at [snack internals]
    at https://snack-web-player.s3.us-west-1.amazonaws.com/v2/42/static/js/app.056cc19a.chunk.js:1:14427

I have confirmed that this is a legitimate issue, as by receiving the same issue with both my custom code and the exact same code provided in the README.md. I am just a beginner in React Native, and am probably missing simple, but I would really appreciate if someone could spend the time to help me with this.

Thanks so much!

Executing multiple `searchForLocations` calls on Android is a bit slowish

It appears that GeoCoder. getFromLocationName executes synchronously and blocks the thread on Android. This becomes an issue when the function is used in an auto-complete scenario, where the user is typing and searches are send to the back-end. This causes the thread to block and no new requests can be served until the previous is finished. In an auto-complete scenario this is not desirable and being able to execute multiple commands at the same time provides a much better user experience.

It might be useful if a small pool of threads are used, so that multiple requests can be executed at the same time on Android

searchForLocations doesn't return `name` on Android

Hi, first of all, thanks for this great package! 👍

On iOS I'm getting a nice name when I call searchForLocations, however on Android I'm always getting null back. Is this by design, or did I misconfigure something?

cheers

Cannot have a non-function arg after a function arg

I'm pretty new to react-native and what I want is for it to show an adress, anywhere, as long as I've the adress of the lon and lat. I'm getting this lon and lat from https://github.com/Agontuk/react-native-geolocation-service and I just don't get it to work. I hope someone can help me, thanks.

Home.js - the file I'm trying to get the adress from. (I've followed the docs from beginning to end)

import React, {Component} from 'react';
import {View, StyleSheet, TouchableOpacity, Text} from 'react-native';
// import { Button, Text } from 'native-base';
import Camera from './Camera';
import {requestLocationPermission} from "./RequestLocation";
import Geolocation, {} from "react-native-geolocation-service";
import RNReverseGeocode from "@kiwicom/react-native-reverse-geocode";

export default class Home extends Component<Props> {

    constructor(props) {
        // Required step: always call the parent class' constructor
        super(props);

        this.state = {
            isLoading: true,
            packages: [],
            list: []
        }
    }

    // function initialize(position) {
    //     var lat = position.coords.latitude;
    //     var lon = position.coords.longitude;
    // reverse geocode lat and lon > show adress in location on the OverviewForm.
    // }

    componentDidMount(){
        requestLocationPermission().then( () => {
                // Instead of navigator.geolocation, just use Geolocation.
                Geolocation.getCurrentPosition(
                    (position) => {
                        console.log(position);
                        global.test = position.coords;

                        const region = {
                            latitude: position.coords.latitude,
                            longitude: position.coords.longitude,
                        };

                        RNReverseGeocode.searchForLocations(
                            this.props.region,
                            (err, res) => {
                                console.log({
                                    error: err,
                                    addresses: res
                                });
                            }
                        );
                    },
                    (error) => {
                        // See error code charts below.
                        console.log(error.code, error.message);
                    },
                    {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000}
                );

                this.setState({
                    isLoading: false,
                    // list: this.props.position,
                }, function(){

                });
            }
        )
    }

    render() {
        console.log(global.test, '2');
        return (
            <View style={styles.container}>
                <TouchableOpacity style={styles.button} onPress={() => this.props.navigation.navigate('Camera')}>
                    <Text style={styles.buttonText}>Incident aangeven</Text>
                </TouchableOpacity>
            </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
    },
    preview: {
        flex: 1,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    capture: {
        flex: 0,
        backgroundColor: '#fff',
        borderRadius: 5,
        padding: 15,
        paddingHorizontal: 20,
        alignSelf: 'center',
        margin: 20,
    },
    button: {
        flex: 1,
        backgroundColor: '#cdb3f8',
    },
    buttonText: {
        fontWeight: 'bold',
        textAlign: 'center',
        fontSize: 25,
        position: 'relative',
        top: '45%'

    }
});

No version tags and changelog/release history available

Hey guys, I noticed that this lib has no changelog or github release history. This makes it difficult for users of this lib to see what has been changed/fixed and whether to upgrade or not. It would be nice when versions would be tagged (e.g. using npm version major|minor|patch) and then you can also add release details in the Github releases page.

cheers, keep up the good work 👍

We can't make it work on Android :(

Thanks in advance, your repo is very helpful!

We are trying to add your project but we got no luck with Android. The only response we get is "error". My only theory is that we are missing some kind of configuration in order to run Kotlin code with react native. Is there any configuration we need to add? This is the first library we add that uses Kotlin.
We followed all the linking instructions since is the same as almost any library out there that's why I think we are missing something related to Kotlin.

Any help is appreciated :D thanks!

PS: iOS works like a charm!

Sometimes on Android, the error "grpc failed" is returned

I've seem this happen on various occasions already. It almost looks like, there is a larger chance that this happens after restarting the device.

Some people on stackoverflow have also seen this issue in regards to GeoCoder
https://stackoverflow.com/questions/45521579/geocoder-grpc-failed

Does not compile on Android with RN59

Due to an upgrade of the gradle plugins in RN59, this module no longer compiles on Android, and the following error occurs when adding it to a new RN59 project:

> Configure project :@kiwicom_react-native-reverse-geocode
WARNING: API 'variant.getJavaCompile()' is obsolete and has been replaced with 'variant.getJavaCompileProvider()'.
It will be removed at the end of 2019.
For more information, see https://d.android.com/r/tools/task-configuration-avoidance.
To determine what is calling variant.getJavaCompile(), use -Pandroid.debug.obsoleteApi=true on the command line to display a stack trace.

FAILURE: Build failed with an exception.

* What went wrong:
The Android Gradle plugin supports only Kotlin Gradle plugin version 1.3.0 and higher.
The following dependencies do not satisfy the required version:
project ':@kiwicom_react-native-reverse-geocode' -> org.jetbrains.kotlin:kotlin-gradle-plugin:1.2.61

It seems that the Gradle plugin needs to be updated, and possibly getJavaCompile() should also be upgraded.

I'll try to fix it and post a PR for it