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

@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 or goWithCustomDialog function, passing only one param that is an object containing user info. Please check the table bellow code snippet for details on these params. 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,
      companyName,
      externalId,
    };
    const response = await go(goParams);
    Alert.alert('on Complete', response);
  };

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

Or goWithCustomDialog

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

export default function App() {
  useEffect(() => {
    openSDK();
  }, []);

  const openSDK = async () => {
    const goWithCustomDialogParams = {
      clientKey,
      companyName,
      externalId,
      hasAcceptedTerms: true, // or false if the user didn't accept the terms
    };
    const response = await goWithCustomDialog(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.
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.
hasAcceptedTerms	Yes	Boolean	Set the value to 'true' if the user has accepted the terms and conditions when invoking the 'goWithCustomDialog' method.method

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());
};