react-native-picup

Getting started

1. Install library

   from npm

   npm install react-native-picup

   from yarn

   yarn add react-native-picup

2. Link native code

   With autolinking (react-native 0.60+)

   cd ios && pod install

   Pre 0.60

   react-native link react-native-picup

Manual installation

(skip if you didn't have problems with automatic installation)

Android

1. Open up android/app/src/main/java/[...]/MainActivity.java

• Add import com.picup.RNPicUpLibPackage; to the imports at the top of the file
• Add new RNPicUpLibPackage() to the list returned by the getPackages() method

2. Append the following lines to android/settings.gradle:

   include ':react-native-picup'
   project(':react-native-picup').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-picup/android')

3. Insert the following lines inside the dependencies block in android/app/build.gradle:

    implementation project(':react-native-picup')

Next Step

• Insert the following lines inside repositories in android/build.gradle

  allprojects {
      repositories {
          ...
          google()
          jcenter()
          maven { url 'https://www.jitpack.io' }
          maven { url 'https://maven.google.com' }
          maven { url 'https://raw.githubusercontent.com/PicupMobile/PicupSDKv3/master/releases' }
          maven { url "https://mint.splunk.com/gradle/" }
      }
  }

• Insert the following lines inside the dependencies block in android/app/build.gradle:

   dependencies {
      ...
      implementation 'com.picup.sdk:core_v3:4.6.1'
  }

There are two options to implement the hardening: Native JAVA and React-Native.

Native JAVA

• Add in AndroidManifest.xml

• Replace in MainActivity

  import android.content.Intent;
  import androidx.annotation.NonNull;
  import com.facebook.react.ReactActivity;
  import com.picup.RNPicUpModule;
  public class MainActivity extends ReactActivity {
  ...
   @Override
     public void onActivityResult(int requestCode, int resultCode, Intent data) {
       super.onActivityResult(requestCode, resultCode, data);
       RNPicUpModule.onActivityResult(requestCode, resultCode, data);
     }
     @Override
     public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults ) {
       super.onRequestPermissionsResult(requestCode, permissions, grantResults);
       RNPicUpModule.onRequestPermissionsResult(requestCode, permissions, grantResults);
     }

IOS

1. Add RNSVG to your Podfile (with RN 0.60+ autolinking, this is not needed)

pod 'react-native-picup', :path => '../node_modules/react-native-picup'

and run pod install from ios folder

Add Permission in plist

Go into your .plist file and add NSContactsUsageDescription with specific string

<key>NSContactsUsageDescription</key>
<string>$(PRODUCT_NAME) need contact access</string>

Silent Push Notifications

To receive updates using silent push notifications:

Add Capabilities : Background Mode - Remote Notifications

Go into your MyReactProject/ios dir and open MyProject.xcworkspace workspace. Select the top project "MyProject" and select the "Signing & Capabilities" tab. Add a 2 new Capabilities using "+" button:

• Background Mode capability and tick Remote Notifications.
• Push Notifications capability

Create a push key:

Go to https://developer.apple.com/account/resources/authkeys and create a new APNS key. Download the key and save its Key ID.

Send push credentials to the PicUP team:

• APNS certificate p12 file and non-empty password (See Apple’s documentation)
• App ID (bundle identifier)

Ensure push entitlement:

Go to https://developer.apple.com/account/resources/identifiers, click your app ID, and check Push Notifications.

Register for remote notifications:

• Swift In your AppDelegate.application(:didFinishLaunchingWithOptions:) call:

  application.registerForRemoteNotifications()

• Objective-c In your AppDelegate.m(:didFinishLaunchingWithOptions:) call:

  [application registerForRemoteNotifications];

Pass the push notification:

• Swift In your AppDelegate.application

  import PicUPSDKv3

  func application(_ application: UIApplication,
    didReceiveRemoteNotification userInfo: [AnyHashable: Any],
    fetchCompletionHandler completion: @escaping (UIBackgroundFetchResult) -> Void
  ) {
      if userInfo["sender"] as? String == "PicUpMobile" {
          PicUpSDK.shared.didReceiveMessage(userInfo: userInfo) { result in
              completion(.newData)
          }
      } else {
          completion(.newData)
      }
  }

• Objective-c In your AppDelegate.m

  #import <PicUPSDKv3/PicUPSDKv3-Swift.h>

  -(void) application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
  {
    if ([userInfo[@"sender"] isEqualToString:@"PicUpMobile"]) {
      [PicUpSDK.shared didReceiveMessageWithUserInfo:userInfo completion:^(PicUpResult * _Nonnull result) {
        NSLog(@"PicUpSDK push result: %@", result.localizedDescription);
        completionHandler(UIBackgroundFetchResultNewData);
      }];
    } else {
      completionHandler(UIBackgroundFetchResultNewData);
    }
  }

Pass the push token to bridge:

• Swift In your application bridge header file

  #import "Picup-Bridging-Header.h"

In your AppDelegate.application

  func application(
    _ application: UIApplication, 
    didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data)
  {
    let picup = Picup()
    picup.setPushToken(deviceToken);
  }

• Objective-c In your AppDelegate.m

  #import "Picup-Bridging-Header.h"

  - (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
  {
      Picup *picup = [[Picup alloc] init];
      [picup setPushToken:deviceToken];
  }

Background Fetch

You can refresh PicUP campaigns while your app is in the background, by using iOS Background Fetch.

First, Add the background fetch capability:

• Select your app target, and click Signing & Capabilities at the top bar.

• Click the + Capability at the top and add “Background Modes”.

• Check the Background fetch checkbox.

• Swift In your AppDelegate.application(:didFinishLaunchingWithOptions:) call:

  application.setMinimumBackgroundFetchInterval(UIApplication.backgroundFetchIntervalMinimum)

• Objective-c In your AppDelegate.m(:didFinishLaunchingWithOptions:) call:

  [application setMinimumBackgroundFetchInterval: UIApplicationBackgroundFetchIntervalMinimum];

• Swift In your AppDelegate.application

  import PicUPSDKv3

  func application(_ application: UIApplication,
    performFetchWithCompletionHandler completion: @escaping (UIBackgroundFetchResult) -> Void
  ) {
      PicUpSDK.shared.refresh(completion: { result in
          completion(.newData)
      })
  }

• Objective-c In your AppDelegate.m

  #import <PicUPSDKv3/PicUPSDKv3-Swift.h>

  -(void)application:(UIApplication *)application performFetchWithCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
  {
    [PicUpSDK.shared refreshWithCompletion:^(PicUpResult * _Nonnull result) {
      completionHandler(UIBackgroundFetchResultNewData);
    }];
  }

Methods

• You can call this methods in React

  export function PicUpRegister(
    name: string, 
    phone: string, 
    organizationCode: string, 
    security: string
  ): Promise<any>
  export function setPermissions(json: string): Promise<any>;
  export function MessageReceived(map: string, msg: string): Promise<any>;
  export function FcmOnNewToken(): Promise<any>
  export function enableService(): Promise<any>
  export function disableService​(): Promise<any>
  export function clearData(): Promise<any>
  export function isServiceEnabled(): boolean
  export function isExternalPhoneStateEnabled(): boolean
  export function isServiceAvailable(): boolean
  export function ​saveWindowPosition​(​save: boolean): Promise<any>;
  export function ​isWindowPositionSaved​(​): boolean;
  export function ​setDebugMode​(​mode: boolean): Promise<any>;
  export function ​setExternalPhoneStateOption(​mode: boolean): Promise<any>;
  export function ​isDebugMode​(​): boolean;
  export function ​setOptoutOption​(​mode: boolean): Promise<any>;
  export function ​isOptoutOptionActivated​(​): boolean;
  export function setPermissionExternalMode(​): Promise<any>;
  export function setPermissionInternalMode(​): Promise<any>;
  export function ​getPermissionMode​(​): string;
  export function ​isExternalPermissionsMode​(​): boolean;
  export function ​disablePullRequestOption​(​mode: boolean): Promise<any>;
  export function ​isPullRequestOptionDisabled​(​): boolean;
  export function ​disableCampaignCheck​(​mode: boolean): Promise<any>;
  export function ​isCampaignCheckDisabled​(​): boolean;
  export function isIncomingDataBlocked(): boolean
  export function blockIncomingData(mode: boolean): Promise<any>;
  export function setInternalIncomingNumbersList(json: string): Promise<any>;
  export function getInternalIncomingNumbersList(): string;
  export function clearInternalIncomingNumbersList(): Promise<any>;
  export function setInternalCampaignsJson(json: string): Promise<any>;
  export function getInternalCampaignsJson(): string;
  export function clearInternalCampaignsJson(): Promise<any>;

• setPermissions

  export function setPermissions(json: string): Promise<any>;

  • Example JSON is below

    {
      "askingPermissions": {
        "nextAskingDays": 0,
        "maxAskingCount": 2,
        "reset": false
      },
      "opt-in": {
        "enable": true
      },
      "CallScreening": {
        "enable": true,
        "name": "CallScreening"
      },
      "otherPermissions": [
        {
          "enable": true,
          "name": "ReadPhoneState"
        },
        {
          "enable": true,
          "name": "ReadCallLogs"
        },
        {
          "enable": true,
          "name": "WriteContacts"
        }
      ],
      "drawPermission": {
        "enable": true,
        "name": "DrawOverlays",
        "askOrder": "Last",
        "explanation": {
          "message": "",
          "enable": true
        }
      }
    }

Example

import * as React from 'react';
import {Button} from 'react-native';
import PicUp from 'react-native-picup';

export default () => {
  React.useEffect(() => {
    setPermissons();
  }, []);

  const onRegister = () => {
    const user = {
      name: "<NAME>",
      phone: "<PHONE>",
      code: "<CODE>",
      secure: "<SECURE>",
    };

    PicUp.PicUpRegister(user.name, user.phone, user.code, user.secure).then(value => {
        console.log('PicUpRegister:', value);
    }).catch(reason => {
        console.log("catch", reason);
    });
  };

  const setPermissons = () => {
    const PermissionsJson = {
        "askingPermissions":
            {
                "nextAskingDays": 0,
                "maxAskingCount": 2,
                "reset": false
            },
        "opt-in":
            {
                "enable": true
            },
        "CallScreening":
            {
                "enable": true,
                "name": "CallScreening"
            },
        "otherPermissions":
            [
                {"enable": true, "name": "ReadPhoneState"},
                {"enable": true, "name": "ReadCallLogs"},
                {"enable": true, "name": "WriteContacts"}
            ],
        "drawPermission":
            {
                "enable": true,
                "name": "DrawOverlays",
                "askOrder": "Last",
                "explanation":
                    {
                        "message": "",
                        "enable": true
                    }
            }
    };

    PicUp.setPermissions(JSON.stringify(PermissionsJson)).then(value => {
        console.log('setPermissions:', value);
    }).catch(reason => {
        console.log("catch", reason);
    });
  };

  return (
    <Button onPress={onRegister}>Register</Button>
  )
};