[fa icon="calendar"] Publié le 11 November 2015 par Tiago Ferreira


TL;DR: Use the rn-geolocation npm package. After you install it, add the plugin to your Android build by changing your settings.gradle and android/app/build.gradle and add the package to your MainActivity.java.

For the past few days I have been developping a React Native app for Android. One of the things I needed for my app was geolocation. I started by trying navigator.geolocation just to figure out that the Geo Location module is a Missing Module in React Native for Android. Since that was not an option, I set out looking for answers:

The ones I found depended on external libraries, so in the end I ended up creating my own rn-geolocation native module for Android. I have to thankCorentin Smith for sharing his Java code with me. I ended up using most of it for my package.

How to use the package

To use this package, install it using npm:

npm install --save rn-geolocation  

Since navigator.geolocation is already part of React Native for iOS, you only need to add the Android module to your build process.
To do so, include the package in your gradle build by replacing include ':app'in your settings.gradle with:

include 'rn-geolocation',':app'  
project(':rn-geolocation').projectDir = new File(rootProject.projectDir, '../node_modules/rn-geolocation/android')  

In your android/app/build.gradle add it as a dependency:

dependencies {  
  ...
  compile project(':rn-geolocation')
}

And finally register the package in your MainActivity.java:

...
import com.facebook.soloader.SoLoader;  
import com.tiagojdferreira.RNGeolocationPackage; // <-- import

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {

    private ReactInstanceManager mReactInstanceManager;
    private ReactRootView mReactRootView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mReactRootView = new ReactRootView(this);

        mReactInstanceManager = ReactInstanceManager.builder()
                .setApplication(getApplication())
                .setBundleAssetName("index.android.bundle")
                .setJSMainModuleName("index.android")
                .addPackage(new MainReactPackage())
                .addPackage(new RNGeolocationPackage()) // <-- import
                .setUseDeveloperSupport(BuildConfig.DEBUG)
                .setInitialLifecycleState(LifecycleState.RESUMED)
                .build();

        mReactRootView.startReactApplication(mReactInstanceManager, "testGeolocation", null);

        setContentView(mReactRootView);
    }
    ...
}

Now that you've installed it, just require it, and use getCurrentPosition to recover latitude and longitude:

var React = require('react-native');  
var rnGeolocation = require('rn-geolocation');

...

rnGeolocation.getCurrentPosition(  
      (position) => callback(position)
)

Latitude and longitude can be recovered as:

position.coords.longitude  
position.coords.latitude  

Example

There's a demo of this package on the github page. To try it, just clone the repository and install the example:

git clone https://github.com/Tiagojdferreira/rn-geolocation.git  
cd rn-geolocation/example  
npm install  

npm install may take a while, as react is being installed.
Once it is done, to run the app on device, do:

adb reverse tcp:8081 tcp:8081  
react-native run-android  

Liked this article? Interested in building an app with us?

Contact a React Native expert in Paris




Want to rate this article?
Submit Rating

Topics: Devops, React Native, Android