React Native

How to add geolocation to your Android app using React Native

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

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:

 

Question on @Quora: How do I use maps/gps in react native Android? https://www.quora.com/React-Native-Facebook/How-do-I-use-maps-gps-in-react-native-Android?srid=X5rB #react #reactnative

 

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 thank Corentin Smith for sharing his Java code with me. I ended up using most of it for my package.

How to use the package React Native

To use this package, install it using npm:

++pre>++code>npm install --save rn-geolocation  
++/code>++/pre>

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 ++code>include ':app'++/code>in your settings.gradle with:

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

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

++pre>++code>dependencies {  
 ...
 compile project(':rn-geolocation')
}
++/code>++/pre>

And finally register the package in your MainActivity.java:

++pre>++code>...
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);
   }
   ...
}
++/code>++/pre>

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

++pre>++code>var React = require('react-native');  
var rnGeolocation = require('rn-geolocation');

...

rnGeolocation.getCurrentPosition(  
     (position) => callback(position)
)
++/code>++/pre>

Latitude and longitude can be recovered as:

++pre>++code>position.coords.longitude  
position.coords.latitude  
++/code>++/pre>

Example of the package to add geolocation to your Android app

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

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

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

++pre>++code>adb reverse tcp:8081 tcp:8081  
react-native run-android  
++/code>++/pre>

 

Développeur mobile ?

Rejoins nos équipes