The OkCollect React Native library enables you to launch OkHi from your app and collect accurate addresses from your users.
npm install @okhi/react-native-okcollect
import React, { useState } from 'react';
import { Button } from 'react-native';
import {
OkHiException,
OkHiUser,
requestLocationPermission,
} from '@okhi/react-native-core';
import OkHiLocationManager, {
OkCollectSuccessResponse,
} from '@okhi/react-native-okcollect';
function App() {
const [launch, setLaunch] = React.useState(false);
useEffect(() => {
// location permission is required to enable users to create
// addresses at their current location
async function requestPermission() {
await requestLocationPermission({
message:
'Hey, we need permissions to enable you create addresses at your current location',
title: 'Location permission required',
buttonPositive: 'Grant',
});
}
requestPermission();
}, []);
const user: OkHiUser = {
firstName: 'Bob',
lastName: 'Mark',
phone: '+254712345678', // Make sure its in MSISDN standard format
};
const handleOnSuccess = async (response: OkCollectSuccessResponse) => {
setLaunch(false);
// perform any logic you'd wish with user and location objects
const { user, location } = response;
};
const handleOnError = (error: OkHiException) => {
setLaunch(false);
console.log(error.code);
console.log(error.message);
};
// called when user taps on the top right close button
const handleOnCloseRequest = () => {
setLaunch(false);
};
return (
<View style={{ flex: 1 }}>
<Button onPress={() => setLaunch(true)} title="Start Verification" />
<OkHiLocationManager
user={user}
onSuccess={handleOnSuccess}
onError={handleOnError}
onCloseRequest={handleOnCloseRequest}
launch={launch}
/>
</View>
);
}
See the contributing guide to learn how to contribute to the repository and the development workflow.
MIT
Default spinner component that'll be used as the initial loading indicator.
Checks whether all necessary permissions and services are available in order to start the address creation process.
Object that determines whether or not to request these permissions and services from the user.
A promise that resolves to a boolean value indicating whether or not all conditions are met to start the address creation process.
Generated using TypeDoc
The OkHiLocationManager React Component is used to display an in app modal, enabling the user to quickly create an accurate OkHi address.