chat-uikit-react-native is a React Native UI component library based on Tencent Cloud Chat SDK. It provides universal UI components, including conversation, chat, and group features. With these well-designed UI components, you can quickly build elegant, reliable, and scalable chat applications. The UIKit interface developed with React Native is more in line with the usage habits of overseas customers and supports internationalization. If your business needs to expand overseas, you are welcome to integrate it. For details, refer to the open source code.
The interface effect of chat-uikit-react-native is shown below:
If you are developing a React Native project for the first time, please refer to the steps on the React Native official website set-up-your-environment to configure your development environment.
If you encounter any environment issues during project creation or compilation, you can run npx react-native doctor for an environmental diagnosis.
To respect the copyright of emoji designs, the IM Demo/TUIKit project does not include large emoji elements. Please replace them with your own designed or copyrighted emoji packs before official commercial launch. The default QQ emojis shown below are copyrighted by Tencent and are not available for licensing. Thank you for your understanding and awareness.
1. Open the Demo project, the GenerateTestUserSig.js file under the ./debug directory.
2. Set SDKAPPID and SECRETKEY in the GenerateTestUserSig.js file, which can be obtained from the Chat Console. Click the target application card to enter its configuration page.
3. In the area shown in the figure, click copy to replace the original SDKAPPID and SECRETKEY in the GenerateTestUserSig.js file.
4. Enter the account management page of the application, create an account and obtain the userID, which will be used as the test user for sending messages later.
Click to enter the Application you created above, you will see the Chat product entry in the left sidebar, click to enter.
After entering the Chat product sub-page, click Users to enter the User Management page.
Click Create account to pop up the account creation information filling box. If it is just a regular member, we recommend selecting the General type.
For a better experience with message sending and receiving features, create userID (test_1, test_2).
Step 3: Launching the Project
To compile and run the project, you need to use a real device or an emulator. It is recommended to use a real device. You can refer to the React Native official website running-on-device for connecting a real device for debugging.
Android
iOS
1. Enable Developer Mode on the phone and turn on the USB Debugging switch.
2. Connect the phone with a USB cable, it is recommended to choose the Transfering File option, do not choose the Charge Only option.
3. After confirming the phone is successfully connected, execute npm run android to compile and run the project.
npm run android
1. Connect the phone with a USB cable and open the project ios directory with Xcode.
2. Configure the signing information according to the running-on-device section on the React Native official website.
3. Go to the ios directory and install dependencies.
cd ios
pod install
4. Go back to the root directory and execute npm run ios to compile and run the project.
cd../
npm run ios
Step 4: Sending Your First Message
1. After the project starts, click Initiate Session in the top left corner.
2. Enter the conversation initiation window. In the search bar, enter the userID created in Step 2 (test_2), select it, and open the conversation.
3. Enter the message in the input box and click send.
1. If you encounter an error as shown in the figure when running npm run android, please reset the environment variables in the project root directory.
exportANDROID_HOME=$HOME/Library/Android/sdk
exportPATH=$PATH:$ANDROID_HOME/emulator
exportPATH=$PATH:$ANDROID_HOME/platform-tools
2. If you encounter node environment variable issues when executing the Build command in Xcode, please follow these steps:
