Trudenty React Native KYC SDK

Trudentynk - React Native SDK for KYC

Installation

npm install trudenty-rn-sdk

OR

yarn add trudenty-rn-sdk

Usage

Create a subject ID by consuming our api and making the request below on your backend, make sure to capture the subject id and pass it to your app

// Using a bare-bones request/axios call
import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'https://devapi.trudenty.com',
});

export const createSubject = async ({
  firstName,
  lastName,
  email,
  phoneNumber,
  apiKey,
}) => {
  const configurationObject = {
    url: '/subject',
    method: 'POST',
    headers: { 'X-API-Key': apiKey },
    data: {
      firstName,
      lastName,
      email,
      phoneNumber,
    },
  };
  const subjectId = await axiosInstance(configurationObject)
    .then(async (response) => {
      if (response.status === 200) {
        return response?.data?.data?._id;
      } else {
        throw new Error('An error has occurred');
      }
    })
    .catch((error) => {
      throw error;
    });
  return subjectId;
};

const subjectId = await createSubject({
  firstName: 'YOUR_USERS_LASTNAME',
  lastName: 'YOUR_USERS_FIRSTNAME',
  email: 'YOUR_USERS_EMAIL',
  phoneNumber: 'YOUR_USERS_PHONE',
  path: 'Trudenty',
  apiKey: 'YOUR_COMPANY_API_KEY',
});

import { TrudentyKycView } from 'react-native-trudenty-kyc';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
const RootStack = createNativeStackNavigator();

Get your COMPANY_API_KEY and YOUR_COMPANY_APP_NAME from the Trudenty admin dashboard

The above code snippet imports all the navigtion modules to be used or you're already using NavigationContainer creates a container within which to navigate between all the screens in the KYC process.

createNativeStackNavigator() Creates RootStack component within which to initiate TrudentyKyc imported from our SDK

The above is important so as to have the navigation props

<NavigationContainer data-testid="welcome-btn">
  <RootStack.Navigator initialRouteName="Hello">
    <RootStack.Screen
      name={'Trudenty'}
      options={{ headerShown: false }}
      children={({ route }) => (
        <TrudentyKyc
          config={{
            apiKey: '<YOUR_COMPANY_API_KEY>',
            returnPath: 'Welcome-Page',
            appName: '<YOUR_COMPANY_APP_NAME>',
          }}
          route={route}
          onSuccess={onSuccess}
          onFail={onFail}
          fontFamily={'TTCommons-Demibold'}
        />
      )}
    />
  </RootStack.Navigator>
</NavigationContainer>

To initialise the <TrudentyKyc/> component in your mobile app navigate and set the subjectId as part of the route params as so, remeber RootStack has the route and navigation props you need

//In your app you navigate to Trudenty screen with the subject id in the params
navigation.navigate('Trudenty', { subjectId });

Error Handling

You can pass functions to handle the onSuccess, onFail events that bubbles from the module

const onSuccess = (msg: any) => {
  console.log('On success:', msg);
};
const onFail = (error: any) => {
  console.log('On Error:', error);
};

Customization

To use our pre-packaged font follow these two-step process:

1. Create or update the react-native.config.js file at the root of your react native app, add the following code with the path to our font to the assets array like so:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: [
    'node_modules/trudenty-rn-sdk/module/assets/fonts/TTCommons-DemiBold.ttf',
  ],
};

2. If you're using RN > 0.69 run npx react-native-asset in your cmd else if you're using RN < 0.69.x run react-native link in your cmd

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library