chat-uikit-react-native is a React Native UI component library based on Tencent Cloud Chat SDK, providing common UI components such as session, chat, and group features. With these well-designed UI components, you can quickly build elegant, reliable, and scalable chat applications. The UI style developed based on React Native is more in line with the habits of overseas users and supports internationalization. You are welcome to integrate it.
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.
Integrate chat-uikit-react-native
Step 1: Create a project (this step can be skipped if you already have a project)
The following code does not contain SDKAppID, userID, and userSig, which should be replaced after obtaining the relevant information in Step 5.
To respect the emoji design copyright, the IM Demo/TUIKit project does not include large emoji elements. Before going live and for commercial use, please replace them with other emoji packs that you have designed or have the copyright for. The default yellow face emoji pack shown below is copyrighted by Tencent Cloud and can be licensed for a fee. To obtain authorization, you can Submit a ticket to contact us.
App.tsx
Screens.tsx
Note:
The code below does not contain SDKAppID, userID, and userSig, which should be replaced after obtaining the relevant information in Step 5.
Replace the content in App.tsx, or you can create a new component to introduce.
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.
Replace SDKAppID, userID, userSig in App.tsx, then run the following command:
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 7: Send your first message
1. After the project starts, click Initiate Session in the top left corner.
2. Enter the Initiate Session window. In the search bar, enter the user ID created in Step 5 (test_2), select it and open the session.
3. Enter the message in the input box and click send.