Search…
React-Native Installation Guide
Pngme created a React-Native library that makes integration fast and simple.

Installation

Yarn:
1
$ yarn add @pngme/react-native-sms-pngme-android
Copied!
npm:
1
$ npm install @pngme/react-native-sms-pngme-android --save
Copied!

Linking

For React-Native < 0.61 projects

1
$ react-native link @pngme/react-native-sms-pngme-android
Copied!
Less than 0.61 projects add maven as repository on/Android folder. Open build.gradle and add:
1
allprojects {
2
repositories {
3
...
4
maven { url 'https://jitpack.io' } // <-- add this line
5
}
6
}
Copied!
Also make sure that your gradle.properties has the following properties
1
android.useAndroidX=true
2
android.enableJetifier=true
Copied!
For React-Native >= 0.61 no linking process is needed

Installation Tips

Some React-Native versions have a dependency collision with `kotlinx-coroutines-core`. If this error appears, replace this module in your App gradle.
android/app/build.gradle
1
// add from here
2
configurations {
3
implementation {
4
exclude group: "org.jetbrains.kotlinx", module: "kotlinx-coroutines-core"
5
}
6
}
7
// to here
8
9
dependencies {
10
implementation ....
11
// For RN <= 0.61.0
12
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'
13
14
}
Copied!
We highly recommend using JDK 11. If any issues arise, update your JDK version: https://www.oracle.com/java/technologies/javase-downloads.html

Opening Permission Flow

With SmsPngmeAndroid, import the library and invoke SmsPngmeAndroid function.
This passes only one param. This param is an object containing user information.
Check the table adobe code snippet.
SmsPngmeAndroid function is async, so using await you will be able to know when the flow is finished in order to continue with your application flow normally.
1
import * as React from 'react';
2
import { useEffect } from 'react';
3
import { View, Text, Alert } from 'react-native';
4
// Add this line
5
import SmsPngmeAndroid from '@pngme/react-native-sms-pngme-android';
6
7
export default function App() {
8
9
useEffect(() => {
10
openSDK();
11
}, []);
12
13
const openSDK = async() => {
14
const response = await SmsPngmeAndroid(
15
{
16
companyName: 'My Company',
17
clientKey: 'clientKey',
18
userFirstName: 'Test Name',
19
userLastName: 'Test Lastname',
20
userPhone: 'userPhone',
21
userEmail: '[email protected]',
22
environment: 'SANDBOX',
23
externalId: 'your uuid hash',
24
},
25
);
26
Alert.alert("on Complete", response)
27
}
28
29
return (
30
<View>
31
<Text>
32
Your app content..
33
</Text>
34
</View>
35
);
Copied!

Params

Param
Required
Type
Description
environment
Yes
Enum ('SANDBOX' | 'PRODUCTION')
Set environment
companyName
Yes
String
Used to show your company name on components
clientKey
Yes
String
On this param you should pass your client key provided by Pngme team. For security reasons avoid to hardcode this key on your code, we highly recommend to use it from your .env file
userPhone
Yes
String
country code + phone number string. Ej: for Ghana (country code +233) phone number 03X XXX XXXX you should pass '23303X XXX XXXX'
Warning: Pngme assumes that this data is verified by your app. If email or phoneNumber are not verified please let support team know.
userFirstName
Yes
String
User first name
userLastName
Yes
String
User last name
userEmail
No
String
User Email
externalId
No
String
You can pass your uuid in this field, this can be useful to identify your users last when obtaining processed data from our servers.
There is no need to add the above permission in your app Manifest. The SDK will add it automatically, as well as the INTERNET permission.

Updating user information

Once you open the permission flow and the user accepted the permission our servers will create a user with all the params that you sent to SmsPngmeAndroid method. But it's possible that for any reason some of the user's data was changed on your app and you want to notify the change to Pngme in order to keep the records updated and consistent.
In order to be able to update user information we expose a method where you can pass updated data. It's important to know that the method needs to receive all user information again.
1
import SmsPngmeAndroid, {
2
updateUser,
3
} from '@pngme/react-native-sms-pngme-android';
4
5
const handleUpdateUser = async () => {
6
const permissionFlowState = await updateUser({
7
companyName: 'My Company',
8
userFirstName: 'Updated Test Name',
9
userLastName: 'Updated Test Lastname',
10
userPhone: '233454456',
11
userEmail: '[email protected]',
12
externalId: 'your uuid hash',
13
});
14
Alert.alert('Update user', `Success: ${permissionFlowState.toString()}`);
15
};
Copied!
updateUser method should be called after the user granted permissions and accepted terms and conditions

Auxiliary methods

Auxiliary methods allow you to get the status of user permissions during a session.

Checking permissions

Check a permission status by invoking arePermissionsEnabled async function. This will return a boolean:
1
import SmsPngmeAndroid, { arePermissionsEnabled } from '@pngme/react-native-sms-pngme-android';
2
3
const testFunction = async() => {
4
const areThey = await arePermissionsEnabled();
5
Alert.alert("Result", areThey.toString());
6
}
Copied!

Knowing user interaction

Have visibility of the user behavior that led to the current state of permission (accepted or denied) with checkPermissionFlow function. Returns 3 possible values:
  • "CLOSE FLOW"
  • "NEVER ASK AGAIN"
  • "NO ACTION PERFORMED"
Then, use checkPermissionFlow and arePermissionsEnabled to view the current permisson status and most recent interaction of the user with the SDK:
1
import SmsPngmeAndroid, { checkPermissionFlow } from '@pngme/react-native-sms-pngme-android';
2
3
const testFunction = async() => {
4
const lastActionPerformed = await checkPermissionFlow();
5
Alert.alert("Result", lastActionPerformed);
6
}
Copied!

Checking if the session started

There are a couple of exceptions where permissions were accepted, but SMS messages are not being sent yet.
Exception reasons:
  • The user granted permission via Android app settings
  • The sms SDK was opened, the user accepted permissions but for whatever reason (network issue, no connection, timeout) and Pngme's API did not start a new session.
To start sending the SMS messages, open permission flow by calling SmsPngmeAndroid again to start a new session. Once a session starts, the SDK will start sending SMS data on the background. To know if a session was started, expose the boolean operation: isPermissionEnabledAndWasSessionStarted and can be use on that way:
1
import SmsPngmeAndroid, { isPermissionEnabledAndWasSessionStarted } from '@pngme/react-native-sms-pngme-android';
2
3
const testFunction = async() => {
4
const wasASessionStarted = await isPermissionEnabledAndWasSessionStarted();
5
Alert.alert("Result", wasASessionStarted.toString());
6
}
Copied!

Sending Extra data to Pngme

Once permissions were approved and react-native-sms-pngme-android is sending SMS you can send extra data regarding user information and user's loan.

Send KYC Data

If you are checking user identity in your app, you can send this data to Pngme in order to be able to see it when using our Web Admin.
Note: Currently our API is not processing: id Number, idType, idImage and issuer Data. We will continue providing this solution in the near term. We recommend sending the data so in near future when the API includes these fields you do not have to release a new version.
f you KYC consist on more that one id document verification, you can send different documents by calling sendKYCData multiple times.
Remember that this method should be called after user SmsPngmeAndroid
1
import SmsPngmeAndroid, { sendKYCData } from '@pngme/react-native-sms-pngme-android';
2
3
const handleSendKYCData = () => {
4
sendKYCData({
5
idNumber: 'G4564654',
6
idType: 'passport',
7
issuer: 'anIssuer',
8
kycVerified: true,
9
idImage: 'Image URL or BASE64 encoding',
10
});
11
};
Copied!

KYC Params

Param
Required
Type
Description
kycVerified
Yes
Boolean
Required boolean param, here you should pass true if the user successfully passed your KYC process.
idNumber
No
String
On this property you should pass the idNumber ej : 'G0000000'
idType
No
String
On this param you should pass the document type ej: 'passport', 'nationalId
issuer
No
String
Issuer or organization that checks user identity
idImage
No
String (Url Or Base45 encoding)
Used to send user document picture

Send Loan info

The library allows you to send Loan information to Pngme server, to be consumed later from api or Web Admin.
Remember that this method should be called after user OpenSDK()
1
import SmsPngmeAndroid, { sendLoanInfo } from '@pngme/react-native-sms-pngme-android';
2
3
const handleSendLoanInfo = () => {
4
const dataToSend = {
5
idLoan: idLoan,
6
};
7
// optional
8
dataToSend.timestamp = 1630335593;
9
sendLoanInfo(dataToSend);
10
};
Copied!

Loan Params

Param
Required
Type
Description
idLoan
Yes
String
On this property you should pass the LoanId
timestamp
No
Integer
Optional loan applied Unix timestamp in milliseconds

ForceSendSMS

Once SmsPngmeAndroid method was called, and user accepted SMS permission the library will continue sending SMS every 12 hours on background (even with app closed) by using native android worker managers. For certain devices, configurations or android customization layers this worker managers could be stoped. To avoid this situation we expose forceSentSMS method.
forceSentSMS runs on background and it's invisible for users. if you call forceSentSMS before asking for permission there is no problem it will ignore the action and will start sending sms after user accepts permisions.
1
import SmsPngmeAndroid, { forceSentSMS } from '@pngme/react-native-sms-pngme-android';
2
3
// call it in your ComponentDidMount (or hook) from RootComponent
4
const forceSentSMS = async() => {
5
forceSentSMS();
6
}
Copied!

What's new

1.0.24 release on October 11 of 2021

This release includes:
  • Added UpdateUser method
  • Better handing of client keys (now there are 1 key for prod and other for testing)
  • Recovery mechanism driven by servers in order to get all sms in case of data lost
Implementation changes: No breaking changes
Last modified 1mo ago