Versions Compared

Old Version 20

changes.mady.by.user Andrey Veprikov

Saved on

compared with

New Version Current

changes.mady.by.user Andrey Veprikov

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Installation

The RN SDK is available for installation from GitHub and NPM. Run one of the following commands in the terminal to install it.

Code Block
languagejs
themeFadeToGrey
yarn add @personaclick/rn-sdk

or

Code Block
languagejs
themeFadeToGrey
yarn add https://github.com/PersonaClick/rn-sdk.git

Additionally, the following components must be installed:

Code Block
languagejs
themeFadeToGrey
yarn add @react-native-async-storage/async-storage
yarn add react-native-device-info
yarn add react-native-push-notification
yarn add @react-native-community/push-notification-ios
yarn add @react-native-firebase/app
yarn add @react-native-firebase/messaging
yarn add
Additional Installation 
@notifee/react-native

Special installation for iOS

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

Update AppDelegate.h

At the top of the file:

Code Block
languagetext
themeFadeToGrey
#import <UserNotifications/UNUserNotificationCenter.h>

Then, add the 'UNUserNotificationCenterDelegate' to protocols:

Code Block
languagetext
themeFadeToGrey
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate>

Update AppDelegate.m

At the top of the file:

Code Block
languagetext
themeFadeToGrey
#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>
#import <Firebase.h>

Then, add the following lines:

Code Block
languageactionscript3
themeFadeToGrey
// Required for the register event.
- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
{
 [RNCPushNotificationIOS didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
}
// Required for the notification event. You must call the completion handler after handling the remote notification.
- (void)application:(UIApplication *)application didReceiveRemoteNotification:(NSDictionary *)userInfo
fetchCompletionHandler:(void (^)(UIBackgroundFetchResult))completionHandler
{
  [RNCPushNotificationIOS didReceiveRemoteNotification:userInfo fetchCompletionHandler:completionHandler];
}
// Required for the registrationError event.
- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
{
 [RNCPushNotificationIOS didFailToRegisterForRemoteNotificationsWithError:error];
}
// Required for localNotification event
- (void)userNotificationCenter:(UNUserNotificationCenter *)center
didReceiveNotificationResponse:(UNNotificationResponse *)response
         withCompletionHandler:(void (^)(void))completionHandler
{
  [RNCPushNotificationIOS didReceiveNotificationResponse:response];
}

And then in your AppDelegate implementation, add the following:

Code Block
languageactionscript3
themeFadeToGrey
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  ...
  // Define UNUserNotificationCenter
  UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
  center.delegate = self;

  return YES;
}

//Called when a notification is delivered to a foreground app.
-(void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler
{
  completionHandler(UNNotificationPresentationOptionSound | UNNotificationPresentationOptionAlert | UNNotificationPresentationOptionBadge);
}

Open a terminal window and navigate to the location of the Xcode project for your app

Code Block
languagetext
themeFadeToGrey
cd ios/
pod install

Update firebase.json

Update or create a new "firebase.json" file using the following:

Code Block
languageactionscript3
themeFadeToGrey
{
    "react-native": {
        "messaging_ios_auto_register_for_remote_messages": false
    }
}

Background Application State

Note
titleiOS Background Limitation

On iOS

, when

devices, the user is able to toggle Background App Refresh in device's Settings. Furthermore, the Background App Refresh setting will automatically be off if the device is in low power mode.

If the iOS Background App Refresh mode is off, the handler configured in setBackgroundMessageHandler won't be triggered.

On iOS, when Firebase is used and a message is received the device silently starts your application in a background state. To get around this problem, you can configure your application. Use this property to conditionally render null ("nothing") if your app is launched in the background:

Code Block
languageactionscript3
themeFadeToGrey
// index.js
import { AppRegistry } from 'react-native';

function HeadlessCheck({ isHeadless }) {
  if (isHeadless) {
    // App has been launched in the background by iOS, ignore
    return null;
  }

  return <App />;
}

function App() {
  // Your application
}

AppRegistry.registerComponent('app', () => HeadlessCheck);

To inject a isHeadless prop into your app, please update your AppDelegate.m file as instructed below:

On iOS devices, the user is able to toggle Background App Refresh in device's Settings. Furthermore, the Background App Refresh setting will automatically be off if the device is in low power mode.

If the iOS Background App Refresh mode is off, the handler configured in setBackgroundMessageHandler won't be triggered.

Code Block
languageactionscript3
themeFadeToGrey
// add this import statement at the top of your `AppDelegate.m` file
#import "RNFBMessagingModule.h"

// in "(BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions" method
// Use `addCustomPropsToUserProps` to pass in props for initialization of your app
// Or pass in `nil` if you have none as per below example
// For `withLaunchOptions` please pass in `launchOptions` object
NSDictionary *appProperties = [RNFBMessagingModule addCustomPropsToUserProps:nil withLaunchOptions:launchOptions];

// Find the `RCTRootView` instance and update the `initialProperties` with your `appProperties` instance
RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                             moduleName:@"nameOfYourApp"
                                             initialProperties:appProperties];
Note
titleiOS Background Limitation
Additional Installation

Special installation for Android

Add the google-services plugin to your android/build.gradle file:

Code Block
languagejs
themeFadeToGrey
buildscript { 
    dependencies {
        classpath 'com.google.gms:google-services:4.3.4'
        // ...
    }
    // ...
}

Also add the following to the android/app/build.gradle file:

Code Block
languagejs
themeFadeToGrey
apply plugin: 'com.google.gms.google-services'



Column

Page Navigation

Table of Contents
maxLevel1
indent0px
stylenone



Related Pages

Filter by label (Content by label)
showLabelsfalse
showSpacefalse
sorttitle
cqllabel = "installation_mobile"