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

ParamRequiredTypeDescription
environmentYesEnum ('SANDBOX' | 'PRODUCTION')Set environment
companyNameYesStringUsed to show your company name on components
clientKeyYesStringOn 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
userPhoneYesString

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.

userFirstNameYesStringUser first name
userLastNameYesStringUser last name
userEmailNoStringUser Email
externalIdNoStringYou 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


Did this page help you?