> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-v6-beta2-flutter-uikit.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# React Native UI Kit

> Prebuilt React Native components for chat, voice, and video calling. Supports React Native CLI and Expo.

<Accordion title="AI Integration Quick Reference">
  | Field        | Value                                                                                                                       |
  | ------------ | --------------------------------------------------------------------------------------------------------------------------- |
  | Package      | `@cometchat/chat-uikit-react-native` v5.x                                                                                   |
  | Peer deps    | `react-native` >=0.70, `@cometchat/chat-sdk-react-native`, `react-native-gesture-handler`, `react-native-safe-area-context` |
  | Calling      | Optional — `@cometchat/calls-sdk-react-native`                                                                              |
  | Localization | Built-in localization support                                                                                               |
  | Source       | [GitHub](https://github.com/cometchat/cometchat-uikit-react-native/tree/v5)                                                 |
</Accordion>

The CometChat React Native UI Kit provides prebuilt, customizable components for adding chat, voice, and video calling to any React Native app. Each component handles its own data fetching, real-time listeners, and state — you just drop them into your layout.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-v6-beta2-flutter-uikit/KYL4KlE88w2a-VuU/images/c8d76132-instant_messaging-153acaaca304981d6d2deccedb0b5a64.png?fit=max&auto=format&n=KYL4KlE88w2a-VuU&q=85&s=6498820cf60af83b256ff12ba56e80bd" width="2880" height="1666" data-path="images/c8d76132-instant_messaging-153acaaca304981d6d2deccedb0b5a64.png" />
</Frame>

<Warning>
  `CometChatUIKit.init(UIKitSettings)` must be called before rendering any UI Kit components or calling any SDK methods. Initialization must complete before login.
</Warning>

<Warning>
  Auth Key is for development/testing only. In production, generate Auth Tokens on your server using the REST API and pass them to the client. Never expose Auth Keys in production client code.
</Warning>

***

## Get Started

Pick your framework and follow the step-by-step integration guide:

<CardGroup cols={2}>
  <Card title="React Native CLI" icon="react" href="/ui-kit/react-native/react-native-cli-integration">
    Standard React Native project setup
  </Card>

  <Card title="Expo" icon={<img src="/docs/images/icons/expo.svg" alt="Expo" />} href="/ui-kit/react-native/expo-integration">
    Expo managed workflow
  </Card>
</CardGroup>

***

## Explore

<CardGroup cols={2}>
  <Card title="Components" icon="grid-2" href="/ui-kit/react-native/components-overview">
    Browse all prebuilt UI components
  </Card>

  <Card title="Features" icon="comments" href="/ui-kit/react-native/core-features">
    Chat, calling, AI, and extensions
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react-native/theme">
    Colors, fonts, dark mode, and custom styling
  </Card>

  <Card title="Methods" icon="code" href="/ui-kit/react-native/methods">
    Initialize, authenticate, and send messages
  </Card>

  <Card title="Troubleshooting" icon="wrench" href="/ui-kit/react-native/troubleshooting">
    Common issues and fixes
  </Card>
</CardGroup>

***

## Resources

<CardGroup cols={3}>
  <Card title="Sample App" icon="github" href="https://github.com/cometchat/cometchat-uikit-react-native/tree/v5">
    Working reference app
  </Card>

  <Card title="Source Code" icon="code" href="https://github.com/cometchat/cometchat-uikit-react-native/tree/v5">
    Full UI Kit source on GitHub
  </Card>

  <Card title="Support" icon="headset" href="https://help.cometchat.com/hc/en-us/requests/new">
    Open a support ticket
  </Card>
</CardGroup>