> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/ably/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting started: Chat with React Native

This guide will get you started with Ably Chat on a new React Native application.

You'll learn how to create chat rooms, send and edit messages, and implement realtime features like typing indicators and presence.

## Prerequisites

### Ably

1. [Sign up](https://ably.com/signup) for an Ably account.

2. Create a [new app](https://ably.com/accounts/any/apps/new), and get your first API key. You can use the root API key that is provided by default, within the **API Keys** tab to get started.

### Create a New Project

1. Create a new React Native project using the React Native CLI:

<Code>
  ```shell theme={null}
  npx rn-new@latest my-chat-react-native-app --nativewind
  cd my-chat-react-native-app
  ```
</Code>

2. Install the Ably Chat SDK and its dependencies:

<Code>
  ```shell theme={null}
  npm install @ably/chat ably
  ```
</Code>

3. For iOS, install the native dependencies:

<Code>
  ```shell theme={null}
  cd ios && pod install && cd ..
  ```
</Code>

## Step 1: Set Up the Ably and Chat Client Providers

The Ably Pub/Sub SDK and the Ably Chat SDK expose React hooks and context providers. The [`AblyProvider`](/docs/getting-started/react-hooks#ably-provider) and [`ChatClientProvider`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.ChatClientProvider.html) should be used at the top level of your application, typically in `App.tsx`.

In production, you should use [token authentication](/docs/auth/token) to avoid exposing your API keys publicly.

Replace the contents of your `App.tsx` file with the following code:

<Code>
  ```react theme={null}
  import React from 'react';
  import * as Ably from 'ably';
  import { ChatClient, LogLevel } from '@ably/chat';
  import { ChatClientProvider } from '@ably/chat/react';
  import { AblyProvider } from 'ably/react';
  import './global.css';

  const realtimeClient = new Ably.Realtime({
    key: {{API_KEY}},
    clientId: 'my-first-client',
  });

  const chatClient = new ChatClient(realtimeClient, {
    logLevel: LogLevel.Info,
  });

  export default function App() {
    return (
      <AblyProvider client={realtimeClient}>
        <ChatClientProvider client={chatClient}>
        </ChatClientProvider>
      </AblyProvider>
    );
  }
  ```
</Code>

## Step 2: Connect to Ably

Clients establish a connection with Ably when they instantiate an SDK. Create a new file `ChatApp.tsx` and add the following functions:

<Code>
  ```react theme={null}
  import React, { useState } from 'react';
  import { SafeAreaView, Text, View } from 'react-native';
  import { useChatConnection, ChatRoomProvider } from '@ably/chat/react';

  function ConnectionStatus() {
    const {currentStatus} = useChatConnection();
    return (
      <View className="p-4 h-full bg-gray-100">
        <Text className="text-lg font-semibold text-blue-500">Ably Chat Connection</Text>
        <Text className="mt-2">Connection: {currentStatus}!</Text>
      </View>
    );
  }

  function ChatApp() {
    return (
      <SafeAreaView className="flex-1 pt-10">
        <View className="flex-1 w-full border border-blue-500 rounded-lg overflow-hidden">
          <ConnectionStatus />
        </View>
      </SafeAreaView>
    );
  }

  export default ChatApp;
  ```
</Code>

In the `App.tsx` file, add the import and use this component:

<Code>
  ```react theme={null}
  import ChatApp from './ChatApp';

  export default function App() {
    return (
      <AblyProvider client={realtimeClient}>
        <ChatClientProvider client={chatClient}>
          <ChatApp />
        </ChatClientProvider>
      </AblyProvider>
    );
  }
  ```
</Code>

Run your application:

<Code>
  ```shell theme={null}
  npm run start
  ```
</Code>

The application should now be running. You should see the connection status displayed with "Connection: connected!".

## Step 3: Create a Room

Now that you have a connection to Ably, you can create a room. The [`ChatRoomProvider`](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/functions/chat-react.ChatRoomProvider.html) provides access to a specific chat room.

Update your `ChatApp()` component to wrap the contents with a `ChatRoomProvider`:

<Code>
  ```react theme={null}
  function ChatApp() {
    return (
      <ChatRoomProvider name="my-first-room">
        <SafeAreaView className="flex-1 pt-10">
          <View className="flex-1 w-full border border-blue-500 rounded-lg overflow-hidden">
            <ConnectionStatus />
          </View>
        </SafeAreaView>
      </ChatRoomProvider>
    );
  }
  ```
</Code>

## Next Steps

Continue to explore the documentation with React Native as the selected language:

* Understand [token authentication](/docs/auth/token) before going to production
* Read more about using [rooms](/docs/chat/rooms?lang=react) and sending [messages](/docs/chat/rooms/messages?lang=react)
* Find out more regarding [presence](/docs/chat/rooms/presence?lang=react)

Explore the [Ably CLI](https://www.npmjs.com/package/@ably/cli) further, or check out the [Chat JS API references](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/modules/chat-js.html) for additional functionality.