![]() | iPhone 13 ![]() | Samsung Galaxy A23 Overseas Version (Google FCM Push) ![]() |
npx @react-native-community/cli@latest init MyReactNativeApp --version 0.75.0
npm install @tencentcloud/react-native-push --save
yarn add @tencentcloud/react-native-push
App.tsx
and replace SDKAppID
and appKey
with your application's information.registerPush
, you can obtain the push ID, namely RegistrationID, through getRegistrationID
. You can push messages to the specified RegistrationID.import Push from '@tencentcloud/react-native-push';const SDKAppID = 0; // Your SDKAppIDconst appKey = ''; // Client Keyif (Push) {// If you need to connect with the Chat login userID (i.e., push messages to this userID),// please use the setRegistrationID API// Push.setRegistrationID(userID, () => {// console.log('setRegistrationID ok', userID);// });Push.registerPush(SDKAppID, appKey, (data) => {console.log('registerPush ok', data);Push.getRegistrationID((registrationID) => {console.log('getRegistrationID ok', registrationID);});}, (errCode, errMsg) => {console.error('registerPush failed', errCode, errMsg);});// Listen for notification bar click events to get push extension informationPush.addPushListener(Push.EVENT.NOTIFICATION_CLICKED, (res) => {// res is the push extension informationconsole.log('notification clicked', res);});// Listen for online pushPush.addPushListener(Push.EVENT.MESSAGE_RECEIVED, (res) => {// res is the message contentconsole.log('message received', res);});// Listen for online push recallPush.addPushListener(Push.EVENT.MESSAGE_REVOKED, (res) => {// res is the ID of the recalled messageconsole.log('message revoked', res);});}
timpush-configs.json
file from the console and add it to the MyReactNativeApp/android/app/src/main/assets
directory of the project. If this directory does not exist, please create it manually. As shown in the figure:google-services.json
file in the MyReactNativeApp/android/app
directory (Please note! Not in the MyReactNativeApp/android/app/src/main/assets directory
). As shown in the picture:agconnect-services.json
file in the MyReactNativeApp/android/app/src/main/assets/
directory. As shown in the figure:appID
in the MyReactNativeApp/android/app/build.gradle
file. As shown in the figure:......android {......defaultConfig {......manifestPlaceholders = ["HONOR_APPID" : ""]}}
Obtain HONOR appID | Configure HONOR appID |
![]() | ![]() |
mcs-services.json
file from the Honor Developer Management Center, and configure it in the MyReactNativeApp/android/app
directory (Please note! Not in the MyReactNativeApp/android/app/src/main/assets directory
directory).appID
and appKey
in the MyReactNativeApp/android/app/build.gradle
file. As shown in the figure:......android {......defaultConfig {......manifestPlaceholders = ["VIVO_APPKEY" : "0","VIVO_APPID" : "0",]}}
Obtain vivo appID && appKey | Configure vivo appID && appKey |
![]() | ![]() |
MyReactNativeApp/ios/MyReactNativeApp
directory, create a new Resources
folder and a new timpush-configs.json
file. Edit timpush-configs.json
and enter the certificate ID obtained from the console, as shown below:{"businessID": "Your Certificate ID"}
timpush-configs.json
directory to the project. As shown in the figure:timpush-configs.json
matches the applicationId
value in MyReactNativeApp/android/app/build.gradle
. Inconsistency will result in offline push notifications being unavailable.MyReactNativeApp/android
directory with Android Studio....import com.tencent.qcloud.rntimpush.TencentCloudPushApplication// Replace Application with TencentCloudPushApplicationclass MainApplication : TencentCloudPushApplication(), ReactApplication {...// add TencentCloudPushPackage to the list of packages returned in ReactNativeHost's getPackages() methodoverride fun getPackages(): List<ReactPackage> =PackageList(this).packages.apply {// Packages that cannot be autolinked yet can be added manually here, for example:// add(MyReactNativePackage())}}
...import com.tencent.qcloud.rntimpush.TencentCloudPushApplication;// Replace Application with TencentCloudPushApplicationpublic class MainApplication extends TencentCloudPushApplication implements ReactApplication {...// add TencentCloudPushPackage to the list of packages returned in ReactNativeHost's getPackages() method@Overrideprotected List<ReactPackage> getPackages() {List<ReactPackage> packages = new PackageList(this).getPackages();// Packages that cannot be autolinked yet can be added manually here, for example:// packages.add(new MyReactNativePackage());return packages;}...
android/build.gradle
file to update repositories
, dependencies
, and allprojects
.buildscript {...repositories {...google()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 {...// If the com.android.tools.build:gradle in your created project does not have a version number, set it to 8.5.0// classpath("com.android.tools.build:gradle:8.5.0")classpath 'com.google.gms:google-services:4.3.15'classpath 'com.huawei.agconnect:agcp:1.9.1.301'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' }}}...
android/app/build.gradle
file, configure the vendor's push package as needed, and apply the plugin....// If your APP requires FCM push notifications, uncomment the following line// apply plugin: 'com.google.gms.google-services'// If your APP requires Huawei push notifications, uncomment the following line// apply plugin: 'com.huawei.agconnect'// If your APP requires HONOR push notifications, uncomment the following line// apply plugin: 'com.hihonor.mcs.asplugin'...android {...defaultConfig {...manifestPlaceholders = ["VIVO_APPKEY" : "0", // If your App requires vivo push notifications, please configure 'VIVO_APPKEY' and 'VIVO_APPID'"VIVO_APPID" : "0","HONOR_APPID" : "" // If your APP requires HONOR push notifications, please configure 'HONOR_APPID']}}dependencies {...// Please import all or part of the following vendor push packages as needed.// Only by importing the push package of the corresponding vendor// can you enable the native push capability of that vendor.implementation 'com.tencent.timpush:huawei:8.3.6498'implementation 'com.tencent.timpush:xiaomi:8.3.6498'implementation 'com.tencent.timpush:oppo:8.3.6498'implementation 'com.tencent.timpush:vivo:8.3.6498'implementation 'com.tencent.timpush:honor:8.3.6498'implementation 'com.tencent.timpush:meizu:8.3.6498'implementation 'com.tencent.timpush:fcm:8.3.6498'}
MyReactNativeApp/ios
directory and install TIMPush.pod install# If you cannot install the latest version, run the following command to update your local CocoaPods repository listpod repo update
npm run android
npm run ios
Callback Address Configuration | Receipt ID Configuration in the IM Console |
![]() Receipt Address: Singapore :https://apisgp.im.qcloud.com/v3/offline_push_report/vivo Korea:https://apikr.im.qcloud.com/v3/offline_push_report/vivo USA: https://apiusa.im.qcloud.com/v3/offline_push_report/vivo Germany: https://apiger.im.qcloud.com/v3/offline_push_report/vivo Indonesia: https://apiidn.im.qcloud.com/v3/offline_push_report/vivo China: https://api.im.qcloud.com/v3/offline_push_report/vivo | ![]() |
Enable Receipt Switch | Configure Receipt Address |
![]() | ![]() |
Was this page helpful?