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.
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:
This will give you a bare React Native app, try to launch it on your Android device:
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:
App.js and replace its content with the following code snippet:
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.
Re-start your app by running the following command again while your phone is connected:
Wait until the "Submit" button appears, then you can press it to send your first verified-location request 🎉.
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.