Using Demo 🚀

We strongly recommend that you first run the framework-related example DEMO we prepared for you. This will not only give you an intuitive experience of OpenIMSDK's capabilities, but will also help you quickly locate and solve problems during the actual integration process.

Tips ❗️

• The open-im-sdk-rn@3.5.1 has contains significant disruptive updates. If you need to upgrade, please check the incoming data and the returned data.

• Unlike other SDKS, React Native SDK operationID is not optional, but required.(operationID is used for back-end log query)

Integration Steps ( React Native CLI )

1. Add Dependencies

yarn add open-im-sdk-rn

For android add following urls to build gradle :

// Top-level build file where you can add configuration options common to all sub-projects/modules.
buildscript {
    ext {
        buildToolsVersion = "33.0.0"
        minSdkVersion = 21
        compileSdkVersion = 33
        targetSdkVersion = 33

        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
        ndkVersion = "23.1.7779620"
    }
    repositories {
        google()
        mavenCentral()
        maven {
            allowInsecureProtocol = true
            url 'https://open-im-online.rentsoft.cn:51000/repository/maven2/'
        }
    }
    dependencies {
        classpath("com.android.tools.build:gradle")
        classpath("com.facebook.react:react-native-gradle-plugin")
    }
}
allprojects {
    repositories {
        maven {
            allowInsecureProtocol = true
            url 'https://open-im-online.rentsoft.cn:51000/repository/maven2/'
        }
    }
}

2. Init SDK

import OpenIMSDKRN from 'open-im-sdk-rn';
import RNFS from 'react-native-fs';

RNFS.mkdir(RNFS.DocumentDirectoryPath + '/tmp');

OpenIMSDKRN.initSDK({
  platformID: 2,  // 1: ios, 2: android
  apiAddr: 'http://your-server-ip:10002',
  wsAddr: 'ws://your-server-ip:10001',
  dataDir: RNFS.DocumentDirectoryPath + '/tmp',
  logLevel: 5,
  isLogStandardOutput: true,
}, 'opid');

3. Log in and set listening

import OpenIMSDKRN, { OpenIMEmitter } from 'open-im-sdk-rn';

OpenIMSDKRN.login({
  userID: 'IM user ID',
  token: 'IM user token',
}, 'opid');

OpenIMEmitter.addListener('onConnecting', () => {
  console.log('onConnecting');
});

OpenIMEmitter.addListener('onConnectSuccess', () => {
  console.log('onConnectSuccess');
});

OpenIMEmitter.addListener('onConnectFailed', ({ errCode, errMsg }) => {
  console.log('onConnectFailed', errCode, errMsg);
});

4. Send and receive messages

import OpenIMSDKRN, { OpenIMEmitter } from 'open-im-sdk-rn';
import type { MessageItem } from 'open-im-sdk-rn';

OpenIMEmitter.addListener('onRecvNewMessages', (data: MessageItem[]) => {
  console.log('onRecvNewMessages', data);
});

const message = await OpenIMSDKRN.createTextMessage('hello openim', 'opid');

OpenIMSDKRN.sendMessage({
  recvID: 'recipient user ID',
  groupID: '',
  message,
}, 'opid')
  .then(() => {
    // Message sent successfully ✉️
  })
  .catch(err => {
    // Failed to send message ❌
    console.log(err);
  });