Tencent Cloud

Recent Pages

React-Native

Last updated: 2024-06-24 15:47:33
Operation step
Step 1: Integrate message push plugin
To install the react-native-tim-push package, execute the following code in the terminal.
# use yarn
yarn add react-native-tim-push
# use npm 
npm install react-native-tim-push
Step 2: Push parameter configuration
iOS
Android
Please upload the iOS APNs push certificate obtained during the vendor configuration step to the IM console.
The IM console will assign a certificate ID for you, as shown in the figure below:
﻿
﻿
﻿
As early as possible after your application starts, call the TimPushPlugin.getInstance().setApnsCertificateID method to pass in the certificate ID.
import { TimPushPlugin } from 'react-native-tim-push';
const certificateID = 'certificate id';
TimPushPlugin.getInstance().setApnsCertificateID(certificateID);
After completing the manufacturer push information on the console, download and add the configuration file to the project. Add the downloaded timpush-configs.json file to the android/app/src/main/assets directory. If the directory does not exist, please create it manually.
1. Choose to download the configuration file timpush-configs.json
1. Add to the project
﻿
﻿
﻿
﻿
﻿
﻿
﻿
Step 3: Client Code Configuration
In this step, you'll need to write some native code, such as: Swift, Java, etc.
Please don't worry, just follow the instructions and copy the code we provide into the specified file.
iOS
Android
You can use Xcode for editing, or you can directly edit in Visual Studio Code or Android Studio.
1.  Create a file named "TencentIMPush.swift" in the iOS directory and copy the following code into it.
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);
  }
}
2.  Locate the "AppDelegate.h" file and add the following code to it.
...
#import <Your-Project-Name-Swift.h>
// My project Name is `TimPushExample`. So it should be `#import <TimPushExample-Swift.h>`
...
After adding the code, it should look like this:
﻿
﻿
3.   Locate the "AppDelegate.mm" file and add the following code to it.
- (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;
}
After adding the code, it should look like this:
﻿
﻿


In the "MainApplication.java" file, import "com.timpush.RNTencentIMPushApplication" and replace "Application" with "RNTencentIMPushApplication" as shown in the following example:
﻿
﻿
﻿
Step 4: Client OEM Configuration
iOS
Android
No need to proceed with this step on the iOS side.
Open the android/app/build.gradle file, at the end, add a dependencies configuration, and as required, include all or part of the following vendor push packages. Only by including the corresponding vendor's push package can you enable that vendor's Native Push Capability.
The version numbers mentioned below should be consistent with the version number of this React Native Push Plugin (react-native-tim-push).
dependencies {
     // Huawei
     implementation 'com.tencent.timpush:huawei:${Push Plugin version number}'
     
     // XiaoMi
     implementation 'com.tencent.timpush:xiaomi:${Push Plugin version number}'
     
     // vivo
     implementation 'com.tencent.timpush:vivo:${Push Plugin version number}'
     
     // Honor
     implementation 'com.tencent.timpush:honor:${Push Plugin version number}'
     
     // Meizu
     implementation 'com.tencent.timpush:meizu:${Push Plugin version number}'
     
     // Google Firebase Cloud Messaging (Google FCM)
     implementation 'com.tencent.timpush:fcm:${Push Plugin version number}'
     
     // Choose one of the two below for OPPO
     // For the China Region, choose to integrate this package
     implementation 'com.tencent.timpush:oppo:${Push Plugin version number}'
     // For other regions, choose to integrate this package
     implementation 'com.tencent.timpush:oppo-intl:${Push Plugin version number}' 
}
Vivo and Honor Adaptation
According to Vivo and Honor Vendor Access Guide, it is necessary to add APPID and APPKEY to the Manifest File.
Method 1
Method 2
// android/app/build.gradle
﻿
android {
    ...    
    defaultConfig {            
        ...        
        manifestPlaceholders = [                
            "VIVO_APPKEY" : "`APPKEY` of the certificate assigned to your application",                
            "VIVO_APPID" : "`APPID` of the certificate assigned to your application",                
            "HONOR_APPID" : "`APPID` of the certificate assigned to your application"
        ]    
    }
}
// android/app/src/main/AndroidManifest.xml
﻿
// Vivo begin
<meta-data tools:replace="android:value"
    android:name="com.vivo.push.api_key"
    android:value="`APPKEY` of the certificate assigned to your application" />
<meta-data tools:replace="android:value"
    android:name="com.vivo.push.app_id"
    android:value="`APPID` of the certificate assigned to your application" />
// Vivo end
﻿
// Honor begin
<meta-data tools:replace="android:value"
    android:name="com.hihonor.push.app_id"
    android:value="`APPID` of the certificate assigned to your application" />
// Honor end
Adapting to Huawei, Honor, and Google FCM
Follow the vendor's method to integrate the corresponding plugin and JSON configuration file.
Note:
The following adaptation for Honor is only needed for version 7.7.5283 and above.
1.1 Download the configuration file and add it to the root directory of the project/Android/app.
Huawei
HONOR
Google FCM
Operation Path
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
﻿
1.2 Add the following configuration under buildscript -> dependencies in the project-level build.gradle file:
For Gradle version 7.1 and above
Gradle version 7.0
Versions Below Gradle 7.0
Add the following configuration under buildscript -> dependencies in your project-level build.gradle file:
buildscript {
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.3.15'
        classpath 'com.huawei.agconnect:agcp:1.4.1.300'
        classpath 'com.hihonor.mcs:asplugin:2.0.1.300'
    }
}
 In the project-level settings.gradle file, add the following repository configurations under pluginManagement -> repositories and dependencyResolutionManagement -> repositories:
pluginManagement {
    repositories {
        gradlePluginPortal()
        mavenCentral()
        maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
        // Configure the Maven repository address for HMS Core SDK.
        maven {url 'https://developer.huawei.com/repo/'}
        maven {url 'https://developer.hihonor.com/repo'}
    }
}
dependencyResolutionManagement {
    ...
    repositories {
        mavenCentral()
        maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
        // Configure the Maven repository address for HMS Core SDK.
       maven {url 'https://developer.huawei.com/repo/'}
       maven {url 'https://developer.hihonor.com/repo'}
    }
    }
}
    
Add the following configuration under buildscript in your project-level build.gradle file:
buildscript {
    repositories {
        mavenCentral()
maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
// Configure the Maven repository address for HMS Core SDK.
maven {url 'https://developer.huawei.com/repo/'}
maven {url 'https://developer.hihonor.com/repo'}
    }
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.3.15'
        classpath 'com.huawei.agconnect:agcp:1.4.1.300'
        classpath 'com.hihonor.mcs:asplugin:2.0.1.300'
    }
}
Add the following repository configurations under dependencyResolutionManagement -> repositories in your project-level settings.gradle file:
dependencyResolutionManagement {
    ...
    repositories {
        mavenCentral()
maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
// Configure the Maven repository address for HMS Core SDK.
maven {url 'https://developer.huawei.com/repo/'}
maven {url 'https://developer.hihonor.com/repo'}
    }
}
   
Add the following configuration under buildscript and allprojects in the project-level build.gradle file:
buildscript {
    repositories {
        mavenCentral()
maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
// Configure the Maven repository address for HMS Core SDK.
maven {url 'https://developer.huawei.com/repo/'}
maven {url 'https://developer.hihonor.com/repo'}
    }
    dependencies {
        ...
        classpath 'com.google.gms:google-services:4.3.15'
        classpath 'com.huawei.agconnect:agcp:1.4.1.300'
        classpath 'com.hihonor.mcs:asplugin:2.0.1.300'
    }
}
﻿
allprojects {
    repositories {
        mavenCentral()
maven { url "https://mirrors.tencent.com/nexus/repository/maven-public/" }
// Configure the Maven repository address for HMS Core SDK.
maven {url 'https://developer.huawei.com/repo/'}
maven {url 'https://developer.hihonor.com/repo'}
    }
}
﻿
1.3  Add the following configuration in the app-level build.gradle file:
apply plugin: 'com.google.gms.google-services'
apply plugin: 'com.huawei.agconnect' 
apply plugin: 'com.hihonor.mcs.asplugin'
Step 5: Handle the message click callback, and parse the parameters
Please define a function to receive the push message click callback event.
Define the function with the following parameters: (ext: string, userID?: string, groupID?: string): void;.
Among them, the ext Field carries the complete ext information specified by the sender. If not specified, a default value is assigned. You can navigate to the corresponding page by parsing this field.
The userID and groupID fields are automatically attempted by the plugin to parse the ext Json String, retrieving the single chat partner userID and group chat groupID information. If you have not defined the ext Field yourself, and the ext Field is default specified by the SDK or UIKit, then you can use the default parsing provided here. If parsing fails, it will be null.
You can define a function to receive this callback and navigate to the corresponding session page or your business page accordingly.
Step 6: Register Push Plugin
Please register the push plugin immediately after logging into IM and before using other plugins (such as CallKit).
Invoke the  TimPushPlugin.getInstance().registerPush method, passing in a callback function defined for clicks.
Furthermore, you have the option to also pass in apnsCertificateID for the iOS push certificate ID and androidPushOEMConfig for the Android push vendor configuration. These two configurations should have been specified in previous steps, and if no modification is necessary, they do not need to be passed again.
TimPushPlugin.getInstance().registerPush({
      onNotificationClicked: (extString) => {},
})
Note:
If your application requires the use of  push plugin for business message notifications , and it does not immediately start and log in to the IM module after launching, or if you need to handle business navigation by obtaining message click callbacks before logging in to the IM module, it is recommended that you call theTimPushPlugin.getInstance().registerOnNotificationClickedEvent method as soon as possible to manually mount the message click callback, so that you can promptly obtain the message parameters.
In this scenario, you can execute this function before calling TimPushPlugin.getInstance().registerPush and place it as early as possible in the code.
TimPushPlugin.getInstance().registerOnNotificationClickedEvent({onNotificationClicked: _onNotificationClicked});
Step 7: Message Push Delivery Statistics
If you need to collect data on delivery, please complete the setup as follows:
Huawei
HONOR
vivo
Meizu
iOS
﻿
Receipt Address: https://api.im.qcloud.com/v3/offline_push_report/huawei
Note:
Huawei Push Certificate ID <= 11344, using Huawei Push v2 version interface does not support reach and click receipt, please regenerate and update the certificate ID.
﻿
Receipt Address: https://api.im.qcloud.com/v3/offline_push_report/honor
Callback Address Configuration
Receipt ID Configuration in the IM Console
﻿
﻿
﻿
Receipt Address: https://api.im.qcloud.com/v3/offline_push_report/vivo
﻿
﻿
﻿
﻿
﻿
Enable Receipt Switch
Configure Receipt Address
﻿
﻿
﻿
﻿
﻿
﻿
Receipt Address: https://api.im.qcloud.com/v3/offline_push_report/meizu
Note:
After enabling the Receipt Switch, please make sure the Receipt Address is configured correctly. Failing to configure or configuring the wrong address will affect the push feature.
﻿
For iOS Push Notification Reach Statistics Configuration, please refer to Statistics Push Arrival Rate.
No configuration is needed for other supported manufacturers; FCM does not support the push notification statistics feature.
Congratulations! You have completed the integration of the push plugin. Please be reminded: After the trial period or subscription expires, the push service (including regular message offline push, all-staff/Tag push, etc.) will automatically cease. To avoid affecting the normal use of your services, please make sure to purchase/renew in advance.