tuikit-atomicx-react-native

tuikit-atomicx-react-native exposes Tencent Cloud's wrapper states around the Native Chat and TRTC SDKs as a directly importable React Native plugin — no native-layer code required.

Installation

npm install tuikit-atomicx-react-native

iOS

cd ios && pod install

Dependencies are auto-linked via autolink:

• AtomicXCore ~> 4.2 (atomicxcore Chat SDK)
• TXIMSDK_Plus_iOS_XCFramework (transitive dependency of AtomicXCore)
• SnapKit

Minimum system requirement: iOS 16.0.

Android

Add the atomicxcore private Maven repository in android/build.gradle:

allprojects {
  repositories {
    maven { url = uri("https://mirrors.tencent.com/nexus/repository/maven-public/") }
    google()
    mavenCentral()
  }
}

Autolink will register NativeAtomicXPackage automatically. If autolink fails, add it manually in MainApplication.kt:

import com.tuikitatomicx.nativex.NativeAtomicXPackage

override val reactHost: ReactHost by lazy {
  getDefaultReactHost(
    context = applicationContext,
    packageList = PackageList(this).packages.apply {
      add(NativeAtomicXPackage())
    },
  )
}

Usage

1. Subscribe to data through the state hook

import React, { useEffect, useState } from 'react';
import { FlatList, Text } from 'react-native';
import { useConversationListState } from 'tuikit-atomicx-react-native';

export default function ChatList() {
  const conversationList = useConversationListState('default');
  const [conversations, setConversations] = useState<any[]>([]);

  useEffect(() => {
    if (!conversationList) return;

    conversationList.loadConversationsWithCount(20);

    const unsubscribe = conversationList.onConversationListChanged?.((list: any[]) => {
      setConversations(list);
    });

    return () => unsubscribe?.();
  }, [conversationList]);

  return (
    <FlatList
      data={conversations}
      keyExtractor={(item) => item.conversationID}
      renderItem={({ item }) => <Text>{item.showName}</Text>}
    />
  );
}

2. Login / Logout

import { useLoginState } from 'tuikit-atomicx-react-native';

function LoginScreen() {
  const { login, loginStatus, loginUserInfo, logout } = useLoginState();

  const handleLogin = async (userID: string, userSig: string) => {
    await login({ sdkAppID: 0, userID, userSig });
  };

  const handleLogout = async () => {
    await logout({});
  };

  return /* UI */;
}

userSig must be generated by your server using SecretKey. Do not bundle it into the client.

License

MIT