React Native Integration Guide
Pngme React-Native library that makes integration fast and simple.
Installation
Yarn:
$ yarn add @pngme/react-native-sms-pngme-android
npm:
$ npm install @pngme/react-native-sms-pngme-android --save
Linking
For React-Native < 0.61 projects
Information
For React-Native >= 0.61 no linking process is needed
$ react-native link @pngme/react-native-sms-pngme-android
For React Native projects on versions less than 0.61 you must add maven as a repository on/Android folder.
To do this, open build.gradle and add:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' } // <-- add this line
}
}
You must also make sure that your gradle.properties has the following properties defined:
android.useAndroidX=true
android.enableJetifier=true
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`
// add from here
configurations {
implementation {
exclude group: "org.jetbrains.kotlinx", module: "kotlinx-coroutines-core"
}
}
// to here
dependencies {
implementation ....
// For RN <= 0.61.0
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0'
}
Information
We highly recommend using JDK 11. If any issues arise, update your JDK version: https://www.oracle.com/java/technologies/javase-downloads.html
Opening The Permission Flow
With SmsPngmeAndroid, import the library and invoke the SmsPngmeAndroid function.
This passes one parameter. This parameter is an object containing user information to register a user.
Please look at the following code snippet as an example.
The SmsPngmeAndroid function is asynchronous, so by using await you will be able to know when the user registration is finished in order to continue with your application flow normally.
import * as React from 'react';
import { useEffect } from 'react';
import { View, Text, Alert } from 'react-native';
// Add this line
import SmsPngmeAndroid from '@pngme/react-native-sms-pngme-android';
export default function App() {
useEffect(() => {
openSDK();
}, []);
const openSDK = async() => {
const response = await SmsPngmeAndroid(
{
companyName: 'My Company',
clientKey: 'clientKey',
userFirstName: 'Test Name',
userLastName: 'Test Lastname',
userPhone: 'userPhone',
userEmail: '[email protected]',
environment: 'SANDBOX',
externalId: 'your uuid hash',
},
);
Alert.alert("on Complete", response)
}
return (
<View>
<Text>
Your app content..
</Text>
</View>
);
Parameter Definitions
| 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. Warning: |
| 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. |
What's new
1.0.24 release on October 11, 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
Updated over 2 years ago