| 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 { TUILogin } from '@tencentcloud/tui-core';import { TUIConversationService } from '@tencentcloud/chat-uikit-engine';import Push from '@tencentcloud/react-native-push';const SDKAppID = 0; // Your SDKAppIDconst appKey = ''; // Client Keyconst userID = ''; // Your userIDconst userSig = ''; // Encrypted signature string generated from UserIDTUILogin.login({SDKAppID,userID,userSig,useUploadPlugin: true,framework: 'rn',}).then(() => {if (Push) {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) => {console.log('notification clicked', res);// Parse extended information and navigate to the corresponding sessiontry {const data = JSON.parse(res);const conv_type = data?.entity?.chatType === 1 ? 'C2C' : 'GROUP';TUIConversationService.switchConversation(`${conv_type}${data.entity.sender}`);navigation.navigate('Chat');} catch (error) {console.log('error', error);}});// 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 |
| |
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. Note.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 to update plugin
and defaultConfig
. ...// If your APP requires FCM push notifications, uncomment the following line// apply plugin: 'com.google.gms.google-services'apply plugin: 'com.huawei.agconnect'apply plugin: 'com.hihonor.mcs.asplugin'...android {...defaultConfig {...manifestPlaceholders = ["VIVO_APPKEY" : "0","VIVO_APPID" : "0","HONOR_APPID" : ""]}}
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?