Leveraging Push Notifications for Address Verification (React Native Android Only)

Introducing our background push notification feature for Android devices that aims to minimize location data issues and improve data quality.

This feature works by sending a ping to the user’s device, which in turn triggers a background push notification without a notification to the user. This process helps in gathering more accurate location data by reducing the variables that often lead to inaccuracies to ensure that the device sends more information needed for verification. This is designed to also enhance the precision of location-based services and applications, thereby improving user experience and satisfaction.

Steps to implement

Step 1: With the latest release of the react native library, its a requirement to add in the OkHi maven repo as show to your repositories in buide.gradle

maven { // <--- add this as part of the repos
  url "https://repo.okhi.io/artifactory/maven" 
}

Step 2: Enable Cloud Messaging API (legacy)

Step 3: Copy your server key from your Firebase application

Step 4: Paste your key into to OkHi dashboard and save. Production

ℹ️ All the code blocks on this page are example codes from React Native and the OkHi React Native library.

Step 5: Background messaging handler

Initialise the firebase background message handler function and add.

import { AppRegistry } from 'react-native';
import messaging from '@react-native-firebase/messaging';
import {onMessageReceived} from 'react-native-okhi';
import App from './App';

// Register background handler
messaging().setBackgroundMessageHandler(async remoteMessage => {
    if (remoteMessage?.data?.origin === 'okhi') {
        await onMessageReceived();
      }
});

AppRegistry.registerComponent('app', () => App)

Step 6: Listen for firebase token refreshes and communicate this with OkHi.

import messaging from '@react-native-firebase/messaging';
import {onNewToken} from 'react-native-okhi';

useEffect(() => {
  const subscriber = messaging().onTokenRefresh(token => {
    onNewToken(token);
  });
  return () => subscriber();
}, []);

Step 7: Request for Android's Notification permission (Android >= 13 only)

<uses-permission android:name="android.permission.POST_NOTIFICATIONS"/> 
<!-- Add this to your AndroidManifest.xml file -->

import {requestNotificationPermission, isNotificationPermissionGranted} from "react-native-okhi";

//on Button press
const requestNotification = async () =>{
    const isNotification = await isNotificationPermissionGranted();
    if(!isNotification) requestNotificationPermission()
}

Step 8: Get your fcmPushNotificationToken from firebase like this

import messaging from '@react-native-firebase/messaging';
messaging()
  .getToken()
  .then(token => {
    console.log(token);//Your token
  });

Step 9: Add your fcmPushNotificationToken to the OkHiUser object before initialising the Location manager

const user: OkHiUser = {
  phone: "+234...",
  firstName: "Jane",
  lastName: "Doe",
  fcmPushNotificationToken: "<MY_PUSH_NOTIFICATION_TOKEN>"
}

<OkHiLocationManager
  launch={launch}
  user={user} // The OkHiUser object
  onCloseRequest={() => setLaunch(false)}
  onError={e => console.log('Launch Error', e)}
  onSuccess={res => {
    handleOnSuccess(res);
  }}
  config={{streetView: true}}
  loader={renderLoader()}
  theme={{
    appBar: {
      backgroundColor: '#2C60D2',
      logo: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_150x54dp.png',
    },
    colors: {
      primary: '#2C60D2',
    },
  }}
/>

Check out a full integration example.