{"id":31362462,"url":"https://github.com/tencentcloud/chat-demo-react-native","last_synced_at":"2025-10-12T19:39:39.315Z","repository":{"id":183867633,"uuid":"624792865","full_name":"TencentCloud/chat-demo-react-native","owner":"TencentCloud","description":"Build In-App Chat \u0026 Audio/Video Call \u0026 Live Streaming in minutes with UIKit components for React Native.","archived":false,"fork":false,"pushed_at":"2025-03-03T09:14:15.000Z","size":9700,"stargazers_count":27,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-08-22T18:53:15.090Z","etag":null,"topics":["android","chat","chat-app","components","im","ios","react-native","uikit"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TencentCloud.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-04-07T09:14:28.000Z","updated_at":"2025-07-24T08:04:48.000Z","dependencies_parsed_at":"2024-07-22T06:05:33.000Z","dependency_job_id":null,"html_url":"https://github.com/TencentCloud/chat-demo-react-native","commit_stats":null,"previous_names":["tencentcloud/chat-demo-react-native"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TencentCloud/chat-demo-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-demo-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-demo-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-demo-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-demo-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TencentCloud","download_url":"https://codeload.github.com/TencentCloud/chat-demo-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TencentCloud%2Fchat-demo-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277184133,"owners_count":25775285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-27T02:00:08.978Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","chat","chat-app","components","im","ios","react-native","uikit"],"created_at":"2025-09-27T04:53:20.796Z","updated_at":"2025-09-27T04:53:24.595Z","avatar_url":"https://github.com/TencentCloud.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Quick Run Demo\n\n## About chat-uikit-react-native\n\n[chat-uikit-react-native](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react-native) is a React Native UI component library based on Tencent Cloud Chat SDK. It provides universally used UI components that include ConversationList, Chat, and Group components. Leveraging these meticulously crafted UI components, you can quickly construct an elegant, reliable, and scalable Chat application.\n\n\u003e [!IMPORTANT]\n\u003e In respect for the copyright of the emoji design, the Chat Demo/UIKit project does not include the cutouts of large emoji elements. Please replace them with your own designed or copyrighted emoji packs before the official launch for commercial use. The default small yellow face emoji pack is copyrighted by Tencent Cloud and can be authorized for a fee. If you wish to obtain authorization, please submit a ticket to contact us.\n\u003e \n\u003e submit a ticket url：https://console.tencentcloud.com/workorder/category?level1_id=29\u0026level2_id=40\u0026source=14\u0026data_title=Chat\u0026step=1\n\n![image](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/314a8601a26911efa0b3525400bdab9d.png)\n\n#### 👉🏻 Try Online Demo\n\n### Integrating chat-uikit-react-native\nIn this tutorial, you can build a free chatting application in just 10 minutes by integrating chat uikit using react native\n[\u003cimg src=\"https://web.sdk.qcloud.com/im/assets/images/build_react_native_chat.png\" width=\"800\"/\u003e](https://www.youtube.com/watch?v=A76yF_7ReQE)\n\n### Quick Run Demo\n\n#### Step 1：Configuring the development environment\nIf this is your first time developing a React Native project, refer to the React Native official steps [set-up-your-environment](https://reactnative.dev/docs/0.75/set-up-your-environment) to configure the development environment.\nIf you encounter environment problems when creating or compiling the project, you can run `npx react-native doctor` for environment diagnostics.\n\n#### Step 2：Install Demo Source Code\n\n```shell\ngit clone https://github.com/TencentCloud/chat-demo-react-native.git\n```\n\n```shell\ncd chat-demo-react-native/Demo\n```\n#### use yarn\n```shell\nyarn install\n```\n\n#### use npm\n```shell\nnpm i --legacy-peer-deps\n```\n\n#### Step 3：Secure SDKAppID and secretKey\nSet the relevant parameters `SDKAppID` and `SECRETKEY` in the example code of the `debug/GenerateTestUserSig.js` file:\nSDKAppID and SecretKey can be accessed by the [Chat Console](https://console.trtc.io/app):\n![image](https://github.com/TencentCloud/chat-uikit-react/assets/57951148/09c7c16b-5ff8-4b2d-bb1b-b0bf72a754ed)\n\n\n### Step 4：Run Demo\nTo 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](https://reactnative.dev/docs/running-on-device) for connecting a real device for debugging.\n\n#### Android\n- Enable Developer Mode on the phone and turn on the USB Debugging switch.\n- Connect the phone with a USB cable, it is recommended to choose the Transfering File option, do not choose the Charge Only option.\n- After confirming the phone is successfully connected, execute npm run android to compile and run the project.\n\n```javascript\nnpm run android\n```\n\n#### iOS\n- Connect the phone with a USB cable and open the project ios directory with Xcode.\n- Configure the signing information according to the [running-on-device](https://reactnative.dev/docs/running-on-device?platform=ios) section on the React Native official website.\n- Go to the ios directory and install dependencies.\n\n```javascript\ncd ios\npod install\n```\n- Go back to the root directory and execute npm run ios to compile and run the project.\n\n```javascript\ncd ../\nnpm run ios\n```\n\n## FAQs\n1、When running npm run android and an error occurs as shown in the image, please reset the environment variables in the project root directory.\n![image](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/7eeeed1065a711efb66652540055f650.png)\n```javascript\nexport ANDROID_HOME=$HOME/Library/Android/sdk\nexport PATH=$PATH:$ANDROID_HOME/emulator\nexport PATH=$PATH:$ANDROID_HOME/platform-tools\n```\n\n2、If executing the Build command in Xcode prompts an issue with the node environment variables, please proceed as follows:\n![image](https://cloudcache.intl.tencent-cloud.com/cms/backend-cms/65fcdae165ab11efb66652540055f650.png)\n```javascript\ncd ios\necho export NODE_BINARY=$(command -v node) \u003e .xcode.env\n```\n\n## Documentation\n- [Home page](https://trtc.io/document/66036?platform=react%20native\u0026product=chat\u0026menulabel=uikit)\n- [@tencentcloud/chat-uikit-react-native npm](https://www.npmjs.com/package/@tencentcloud/chat-uikit-react-native)\n- [Chat SDK](https://trtc.io/document/34309?platform=web\u0026product=chat)\n\n\n## Contact Us\nJoin a Tencent Cloud Chat developer group for Reliable technical support \u0026 Product details \u0026 Constant exchange of ideas.\n- Telegram group (EN): [join](https://t.me/+1doS9AUBmndhNGNl)\n- WhatsApp group (EN): [join](https://chat.whatsapp.com/Gfbxk7rQBqc8Rz4pzzP27A)\n- Telegram group (ZH): [join](https://t.me/tencent_imsdk)\n- WhatsApp group (ZH): [join](https://chat.whatsapp.com/IVa11ZkVmKTEwSWsAzSyik)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentcloud%2Fchat-demo-react-native","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencentcloud%2Fchat-demo-react-native","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencentcloud%2Fchat-demo-react-native/lists"}