Tencent Cloud Push Plugin For React Native

The react-native-tim-push plugin is a RN plugin that enables developers to integrate push notifications for their RN applications. This plugin supports both iOS and Android platforms and allows for seamless integration with various native push notification providers, such as Huawei, Xiaomi, OPPO, Vivo, Honor, Meizu, and Google Firebase Cloud Messaging (FCM).

Features

• Easy integration with native push notification providers for both iOS and Android
• Automatic handling of push notification events, such as receiving notifications and clicking on notifications
• Customizable push notification handling through user-defined callback functions

Getting Started

Step 1: Add the plugin to your project

To add the react-native-tim-push plugin to your RN project, include it as a dependency in your package.json file or run the following command:

npm install react-native-tim-push
//or
yarn add react-native-tim-push

Step 2: Configure push notification parameters

iOS

Upload your iOS APNs push certificate to the IM console and obtain the certificate ID. Call the TimPushPlugin.getInstance().setApnsCertificateID method as early as possible in your app's lifecycle and pass in the certificate ID:

TimPushPlugin.getInstance().setApnsCertificateID(CertificateID);

Android

After completing the push notification provider configuration in the console, download the timpush-configs.json file and add it to the android/app/src/main/assets directory of your project. If the directory does not exist, create it manually.

Step 3: Configure client-side code

In this step, you will need to write some native code, such as Swift, Java. Follow the instructions provided and copy the provided code snippets to the specified files.

iOS

• Step 1: Create a file named TencentIMPush.swift in the ios directory.
• Step 2: Copy the following code snippet into TencentIMPush.swift file.

import Foundation
import react_native_tim_push

@objc class TencentImPush: NSObject{

  @objc func getOfflinePushCertificatedID() -> Int32 {
    return TencentCloudPushModal.shared.offlinePushCertificateID();
  }
  
  @objc func getApplicationGroupID() -> String {
    return TencentCloudPushModal.shared.applicationGroupID();
  }
  
  @objc func onRemoteNotificationReceived(_ notice: String?) -> Void {
    TencentCloudPushModal.shared.onRemoteNotificationReceived(notice);
  }
}

• Step 3: Add the following code snippet to AppDelegate.h.

#import <Your-Project-Name-Swift.h>
// My project Name is `TimPushExample`. So it should be `#import <Your-Project-Name-Swift.h>`

• Step 4: Add the following code snippet to AppDelegate.mm.

- (int)offlinePushCertificateID {
    TencentImPush *instance = [[TencentImPush alloc] init];
    return [instance getOfflinePushCertificatedID];
}

- (NSString *)applicationGroupID {
    TencentImPush *instance = [[TencentImPush alloc] init];
    return [instance getApplicationGroupID];
}

- (BOOL)onRemoteNotificationReceived:(NSString *)notice {
    TencentImPush *instance = [[TencentImPush alloc] init];
    [instance onRemoteNotificationReceived:notice];
    return YES;
}

Android

In MainApplication.kt, import com.timpush.RNTencentIMPushApplication and replace "Application" with "RNTencentIMPushApplication".

Step 4: Configure push notification providers

iOS

No additional configuration is required for iOS in this step.

Android

Open the android/app/build.gradle file and add the dependencies for the push notification providers you want to support. You can include all or some of the providers listed below:

dependencies {
     // Huawei
     implementation 'com.tencent.timpush:huawei:7.7.5283'
     
     // XiaoMi
     implementation 'com.tencent.timpush:xiaomi:7.7.5283'
     
     // OPPO
     implementation 'com.tencent.timpush:oppo:7.7.5283'
     
     // vivo
     implementation 'com.tencent.timpush:vivo:7.7.5283'
     
     // Honor
     implementation 'com.tencent.timpush:honor:7.7.5283'
     
     // Meizu
     implementation 'com.tencent.timpush:meizu:7.7.5283'
     
     // Google Firebase Cloud Messaging (Google FCM)
     implementation 'com.tencent.timpush:fcm:7.7.5283'
}

Step 5: Handle notification click events and parse parameters

Define a function to handle push notification click events. This function should have the following signature:

  (ext: string, userID?: string, groupID?: string): void;

The ext parameter contains the full ext information for the message, as specified by the sender. If not specified, a default value will be used. You can parse this parameter to navigate to the corresponding page.

The userID and groupID parameters are automatically parsed from the ext JSON string by the plugin, containing the userID of the chat partner and the groupID of the group chat, respectively. If the default ext field is used (specified by the SDK or UIKit), you can use these default values. If parsing fails, they will be null.

Step 6: Register the push plugin

Register the push plugin by calling the TimPushPlugin.getInstance().registerPush method after successfully logging in to the IM module and before using any other plugins (such as CallKit). Pass in the click callback function defined in the previous step.

Optionally, you can also pass in the apnsCertificateID for iOS and androidPushOEMConfig for Android if needed.