README

@pngme/react-native-sms-pngme-android

Module that supports interaction with the Messaging API on Android getting phone SMS in order to be sent to pngme platform.

The package allows you to:

Ask for sms permissions
Get messages
Send the data to pngme server

Installation

Yarn

$ yarn add @pngme/react-native-sms-pngme-android

Npm

$ npm install @pngme/react-native-sms-pngme-android --save

for React-Native < 0.61

$ react-native link @pngme/react-native-sms-pngme-android

For React-Native < 0.61 projects add maven as repository on/Android folder open build.gradle and the following line

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' } // <-- add this line
    }
}

Also make sure that your gradle.properties has the following properties

android.useAndroidX=true
android.enableJetifier=true

for React-Native > 0.61

You do not have to do anything else.

Installation Tips

For some react-native version there is a dependency collision with kotlinx-coroutines-core if you get this error you can fix it by replacing this module on that way on your App 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'
}

We highly recommend to use JDK 11 if you have any issues please try to update your JDK version first https://www.oracle.com/java/technologies/javase-downloads.html

Opening Permission Flow

SmsPngmeAndroid was designed to be as easy as possible to use into your project, you only have to import the library and invoke go function, passing only one param that is an object containing user info please check the table abobe code snippet. Have in mind that 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.

import * as React from 'react';
import { useEffect } from 'react';
import { View, Text, Alert } from 'react-native';
// Add this line
import { go } from '@pngme/react-native-sms-pngme-android';

export default function App() {

  useEffect(() => {
    openSDK();
  }, []);

  const openSDK = async() => {
    const goParams = {
      clientKey,
      firstName: userFirstName,
      lastName: userLastName,
      email: userEmail,
      phoneNumber: userPhone,
      isKycVerified: kycVerified === 'true',
      companyName,
      externalId,
    };
    const response = await go(goParams);
    Alert.alert("on Complete", response)
  }

  return (
    <View>
      <Text>
        Your app content..
      </Text>
    </View>
  );

Params

Param	Required	Type	Description
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
phoneNumber	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.
firstName	Yes	String	User first name
lastName	Yes	String	User last name
email	Yes	String	User Email
externalId	Yes	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.
isKycVerified	Yes	Boolean	On this param you can let pngme know if your user was KYC verified or not

Auxiliar methods

In most of the cases there is no need to have auxiliar methods since with the previous code example you can show the flow to ask permissions but if you call it and permissions are already enable popup will not be shown. Here we add some auxiliar methods in order to know current state of permissions on @pngme/react-native-sms-pngme-android

Checking permissions

You can check permission status by invoking isPermissionGranted async function, it will return a boolean

import { isPermissionGranted } from '@pngme/react-native-sms-pngme-android';

const isPermissionGranted = async () => {
  const isPermissionGrantedBoolean = await isPermissionGranted();
  Alert.alert('Result', isPermissionGrantedBoolean.toString());
};

Reset Permission Flow

go method will open a pop up asking for permissions only the first time, then if you want to show pngme popup again you have to call resetPermissionFlow function and calling go again.

import { go, resetPermissionFlow } from '@pngme/react-native-sms-pngme-android';

const openPopupAgain = async () => {
  // tell pngme library to show popup again on next `go` invocation
  resetPermissionFlow();
  // then call go
  go(/* all params described on GO method */);
};

License

MIT

Usage no npm install needed!