Adding space-tech to your Android app in less than an hour
Building a React Native app with verified location from scratch
In this post I will show you how to create a React Native app with ClaimR’s verified location technology from scratch. You don’t need prior experience with React or React Native in order to be able to follow this guide.
You can find the source code of the end result on Github.
Setup Development Environment
If you already have developed React Native apps before on Android on your development workstation, then you should be able to skip this step. Here we will not be covering the development environment setup process in detail, as the React Native documentation has an excellent guide on how to configure your development environment for React Native. Make sure to follow the instructions for “React Native CLI Quickstart” (rather than the default “Expo CLI Quickstart”) with as target OS “Android”.
Let’s bootstrap a React Native app, run the following command:
npx react-native init MyClaimrApp
This will give you a bare React Native app, try to launch it on your Android device:
yarn run android
Integrating with ClaimR
Next up we will be integrating with ClaimR by using the ClaimR React Native client. This client makes it a lot easier to get started with ClaimR, as it takes care of all the GNSS specifics for you. It’s completely open-source, so feel free to dig into it here if you’re interested to get to know the inner workings.
@claimr/react-native-client as a Dependency
Let’s start by adding ClaimR’s React Native client by running the following command:
yarn add @claimr/react-native-client
Adding the ClaimR Client
App.js and replace its content with the following code snippet:
Create ClaimR API Key
The last step is to add a ClaimR API key. Go to dashboard.claimr.tools and create a new API key. Copy this new key and replace
App.js with the API key you just obtained.
Take It For a Spin
Re-start your app by running the following command again while your phone is connected:
yarn run android
Wait until the “Submit” button appears, then you can press it to send your first verified-location request 🎉.
Note: If you’re experiencing issues, then try completely removing the app. The hot-reloading of React Native sometimes breaks the connection to the native Android code collecting the data for the ClaimR client.
The end-result should look something like this:
Normally you will want to have the certainty from verified location on your backend services. For this you can use the JWT returned by
useLazyVerifiedLocation and send it to your own backend. There you can validate the JWT, such that you can be certain about the user's location. The documentation covers how to work with JWTs on your backend.
Originally published at https://developer.claimr.tools on September 19, 2020.