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 |
|---|
| 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 NotificationsPush 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 |
Additional Installation 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]; |
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' |