Installation
The RN SDK is available for installation from GitHub and NPM (https://www. npmjs.com/package/@personaclick/rn-sdk). Run one of the following commands in the terminal to install it.
Code Block |
---|
language | js |
---|
theme | FadeToGrey |
---|
|
yarn add @personaclick/rn-sdk |
or
Code Block |
---|
language | js |
---|
theme | FadeToGrey |
---|
|
yarn add https://github.com/PersonaClick/rn-sdk.git |
Additionally, the following components must be installed:
Code Block |
---|
language | js |
---|
theme | FadeToGrey |
---|
|
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
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 |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
#import <UserNotifications/UNUserNotificationCenter.h> |
Then, add the 'UNUserNotificationCenterDelegate' to protocols:
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
@interface AppDelegate : UIResponder <UIApplicationDelegate, RCTBridgeDelegate, UNUserNotificationCenterDelegate> |
Update AppDelegate.m
At the top of the file:
Code Block |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
#import <UserNotifications/UserNotifications.h>
#import <RNCPushNotificationIOS.h>
#import <Firebase.h> |
Then, add the following lines:
Code Block |
---|
language | actionscript3 |
---|
theme | FadeToGrey |
---|
|
// 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 |
---|
language | actionscript3 |
---|
theme | FadeToGrey |
---|
|
- (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 |
---|
language | text |
---|
theme | FadeToGrey |
---|
|
cd ios/
pod install |
Update firebase.json
Update or create a new "firebase.json" file using the following:
Code Block |
---|
language | actionscript3 |
---|
theme | FadeToGrey |
---|
|
{
"react-native": {
"messaging_ios_auto_register_for_remote_messages": false
}
} |
Background Application State
Note |
---|
title | iOS Background Limitation |
---|
|
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. |
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 |
---|
language | actionscript3 |
---|
theme | FadeToGrey |
---|
|
// 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:
Code Block |
---|
language | actionscript3 |
---|
theme | FadeToGrey |
---|
|
// 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]; |
Additional Installation
Special installation for Android
Add the google-services plugin to your android/build.gradle
file:
Code Block |
---|
language | js |
---|
theme | FadeToGrey |
---|
|
buildscript {
dependencies {
classpath 'com.google.gms:google-services:4.3.4'
// ...
}
// ...
} |
Also add the following to the android/app/build.gradle
file:
Code Block |
---|
language | js |
---|
theme | FadeToGrey |
---|
|
apply plugin: 'com.google.gms.google-services' |