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.
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>
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>