Stream Chat React Native SDK

https://getstream.io/chat/docs/sdk/react-native/
Admin
Stream Chat React Native SDK provides ready-made, customizable UI components for building...
Tokens:396,518
Snippets:4,839
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Quick Start: Single Agent Setup

Source: https://getstream.io/chat/docs/sdk/react-native/guides/ai-integrations/stream-chat-ai-sdk.md

Initialize and start a single AI agent for a specific channel. This agent can have custom instructions and tools. Remember to stop the agent when it's no longer needed.

```typescript
import {
  Agent,
  AgentPlatform,
  createDefaultTools,
  type ClientToolDefinition,
} from "@stream-io/chat-ai-sdk";

const agent = new Agent({
  userId: "ai-bot-weather",
  channelId: "support-room",
  channelType: "messaging",
  platform: AgentPlatform.OPENAI,
  model: "gpt-4o-mini",
  instructions: [
    "Answer in a friendly, concise tone.",
    "Prefer Celsius unless the user specifies otherwise.",
  ],
  serverTools: createDefaultTools(),
  clientTools: [
    {
      name: "openHelpCenter",
      description: "Open the help center in the web app",
      parameters: {
        type: "object",
        properties: { articleSlug: { type: "string" } },
        required: ["articleSlug"],
      },
    } satisfies ClientToolDefinition,
  ],
  mem0Context: {
    channelId: "support-room",
    appId: "stream-chat-support",
  },
});

await agent.start();
// Later...
await agent.stop();
```

--------------------------------

### Install and Setup Offline Support Dependency

Source: https://getstream.io/chat/docs/sdk/react-native/v8/basics/offline-support.md

Install the necessary dependency for offline support and run pod-install for iOS.

```bash
yarn add @op-engineering/op-sqlite
npx pod-install
```

--------------------------------

### Example Terminal Output During Prebuild

Source: https://getstream.io/chat/docs/sdk/react-native/basics/troubleshooting.md

This bash output demonstrates the expected logs when the custom plugin is executed during the `prebuild` phase, including the modification of the Podfile and successful CocoaPods installation.

```bash
✔ Created native directory
✔ Updated package.json | no changes
CUSTOM MODIFY PODFILE PLUGIN: Podfile modified to include pre_install block.
✔ Finished prebuild
✔ Installed CocoaPods
› Skipping dev server
› Planning build
...

```

--------------------------------

### Install Clipboard Library (Expo)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the expo-clipboard library using npx for Expo projects.

```bash
npx expo install expo-clipboard
```

--------------------------------

### Install Haptic Feedback Library (Expo)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the expo-haptics library using npx for Expo projects.

```bash
npx expo install expo-haptics
```

--------------------------------

### Install Image Picker Library (Expo)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the expo-image-picker library using npx for Expo projects.

```bash
npx expo install expo-image-picker
```

--------------------------------

### Install AI Components and Dependencies

Source: https://getstream.io/chat/docs/sdk/react-native/guides/ai-integrations.md

Install the AI components and their peer dependencies using yarn.

```bash
yarn add @stream-io/chat-react-native-ai react-native-reanimated react-native-worklets react-native-gesture-handler react-native-svg victory-native @shopify/react-native-skia @babel/plugin-proposal-export-namespace-from
```

--------------------------------

### Install Media Library for Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the expo-media-library package using npx expo install.

```bash
npx expo install expo-media-library
```

--------------------------------

### Install File Sharing Library (Expo)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the expo-document-picker library using npx for Expo projects.

```bash
npx expo install expo-document-picker
```

--------------------------------

### Register Message Composer Setup Function

Source: https://getstream.io/chat/docs/sdk/react-native/ui-components/message-composer/composer/message-composer.md

Register a single setup function for the Message Composer to manage middleware and configurations. This example shows how to conditionally insert emoji middleware based on the `emojisEnabled` state and the composer's `contextType`.

```tsx
import { defaultTextComposerMiddlewares } from "stream-chat";

const chatClient = useCreateChatClient({
  apiKey,
  tokenOrProvider: userToken,
  userData: { id: userId, language: "en" },
});

const [emojisEnabled, setEmojisEnabled] = useState(false);

useEffect(() => {
  chatClient.setMessageComposerSetupFunction(({ composer }) => {
    if (composer.contextType === "channel") {
      composer.textComposer.insert(
        defaultTextComposerMiddlewares.map(composer.channel),
      );

      if (emojisEnabled) {
        composer.textComposer.middlewareExecutor.insert({
          middleware: [
            createTextComposerEmojiMiddleware(
              SearchIndex,
            ) as TextComposerMiddleware,
          ],
          position: { after: "stream-io/text-composer/mentions-middleware" },
          unique: true,
        });
      }
    }
  });
}, [chatClient, emojisEnabled]);
```

--------------------------------

### Connect Screens with Navigation Stack

Source: https://getstream.io/chat/docs/sdk/react-native/v8/guides/channel-background-customization.md

This example demonstrates how to integrate the Channel screen and a new WallpaperOverviewScreen into a React Navigation stack. Ensure you have the necessary navigation libraries installed.

```tsx
import { createNativeStackNavigator } from "react-native-screens/native-stack";
import { NavigationContainer } from "@react-navigation/native";

const Stack = createNativeStackNavigator();

export default () => {
  return (
    <SafeAreaProvider>
      <ThemeProvider style={theme}>
        <NavigationContainer>
          <Stack.Navigator initialRouteName="Channel">
            <Stack.Screen
              component={ChannelScreen}
              name="Channel"
              options={noHeaderOptions}
            />
            <Stack.Screen
              component={WallpaperOverviewScreen}
              name="WallpaperOverviewScreen"
            />
          </Stack.Navigator>
        </NavigationContainer>
      </ThemeProvider>
    </SafeAreaProvider>
  );
};
```

--------------------------------

### Install Stream Chat AI SDK

Source: https://getstream.io/chat/docs/sdk/react-native/guides/ai-integrations/stream-chat-ai-sdk.md

Install the Stream Chat AI SDK using npm or yarn.

```bash
npm install @stream-io/chat-ai-sdk
# or
yarn add @stream-io/chat-ai-sdk
```

--------------------------------

### Install expo-video for Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the expo-video package using npx for Expo projects to enable video playing.

```bash
npx expo install expo-video
```

--------------------------------

### Install expo-av for Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the expo-av package using npx for Expo projects for voice recording.

```bash
npx expo install expo-av
```

--------------------------------

### Create and Start a Single AI Agent

Source: https://getstream.io/chat/docs/sdk/react-native/guides/ai-integrations/stream-chat-langchain-sdk.md

Instantiate and start a single AI agent with custom instructions, server tools, and client tools. Ensure the agent is explicitly started and stopped.

```typescript
import {
  Agent,
  AgentPlatform,
  createDefaultTools,
  type ClientToolDefinition,
} from "@stream-io/chat-langchain-sdk";

const agent = new Agent({
  userId: "ai-bot-weather",
  channelId: "support-room",
  channelType: "messaging",
  platform: AgentPlatform.OPENAI,
  model: "gpt-4o-mini",
  instructions: [
    "Answer in a friendly, concise tone.",
    "Prefer Celsius unless the user specifies otherwise.",
  ],
  serverTools: createDefaultTools(),
  clientTools: [
    {
      name: "openHelpCenter",
      description: "Open the help center in the web app",
      parameters: {
        type: "object",
        properties: { articleSlug: { type: "string" } },
        required: ["articleSlug"],
      },
    } satisfies ClientToolDefinition,
  ],
  mem0Context: {
    channelId: "support-room",
    appId: "stream-chat-support",
  },
});

await agent.start();
// Later...
await agent.stop();
```

--------------------------------

### Install Haptic Feedback Library (RN CLI)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the react-native-haptic-feedback library using Yarn for RN CLI projects.

```bash
yarn add react-native-haptic-feedback
```

--------------------------------

### Install @shopify/flash-list with Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Use this command to install the @shopify/flash-list package when using Expo for improved performance with large message lists.

```bash
npx expo install @shopify/flash-list
```

--------------------------------

### Install OP SQLite for Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the @op-engineering/op-sqlite package for offline support using npx expo install.

```bash
npx expo install @op-engineering/op-sqlite
```

--------------------------------

### Setup Command UI Middlewares

Source: https://getstream.io/chat/docs/sdk/react-native/guides/handle-commands-ui.md

Register command middlewares in `MessageComposer` using `setupCommandUIMiddlewares` during client setup. This ensures middlewares are added only once.

```tsx
import {
  useEffect
} from "react";
import {
  setupCommandUIMiddlewares
} from "stream-chat-react-native";

const App = () => {
  useEffect(() => {
    if (!chatClient) {
      return;
    }
    chatClient.setMessageComposerSetupFunction(({ composer }) => {
      setupCommandUIMiddlewares(composer);
    });
  }, [chatClient]);
};
```

--------------------------------

### Install Clipboard Library (RN CLI)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the @react-native-clipboard/clipboard library using Yarn for RN CLI projects.

```bash
yarn add @react-native-clipboard/clipboard
```

--------------------------------

### Install File Sharing Library (RN CLI)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the @react-native-documents/picker library using Yarn for RN CLI projects.

```bash
yarn add @react-native-documents/picker
```

--------------------------------

### Install Emoji Mart Dependencies

Source: https://getstream.io/chat/docs/sdk/react-native/guides/emoji-suggestions.md

Install the necessary packages for emoji data and the emoji picker UI.

```bash
npm install @emoji-mart/data emoji-mart
```

--------------------------------

### Install Native CLI Dependencies for Location Sharing

Source: https://getstream.io/chat/docs/sdk/react-native/guides/location-sharing.md

Install the necessary packages for location tracking and map rendering when using the Native CLI.

```bash
yarn add @react-native-community/geolocation
yarn add react-native-maps
```

--------------------------------

### Basic Channel Screen Setup

Source: https://getstream.io/chat/docs/sdk/react-native/v8/guides/custom-poll-flow.md

This is the initial setup for a Channel screen with MessageList and MessageInput components. Ensure polls are enabled in the Stream Dashboard.

```tsx
import {
  OverlayProvider,
  Chat,
  Channel,
  MessageList,
  MessageInput,
} from "stream-chat-react-native";

const ChannelScreen = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <Channel channel={channel}>
          <ChannelHeader />
          <MessageList />
          <MessageInput />
        </Channel>
      </Chat>
    </OverlayProvider>
  );
};

```

--------------------------------

### Install Peer Dependencies (Expo)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the necessary peer dependencies for the Stream Chat SDK when using Expo.

```bash
npx expo install @react-native-community/netinfo expo-image-manipulator react-native-gesture-handler react-native-reanimated react-native-svg react-native-teleport
```

--------------------------------

### Install Image Picker Library (RN CLI)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the react-native-image-picker library using Yarn for RN CLI projects.

```bash
yarn add react-native-image-picker
```

--------------------------------

### startVoiceRecording

Source: https://getstream.io/chat/docs/sdk/react-native/contexts/message-input-context.md

Starts a new voice recording session.

```APIDOC
## startVoiceRecording

### Description
Starts a new voice recording session.

### Method
N/A (Function provided by context)

### Endpoint
N/A

### Parameters
N/A

### Request Example
N/A

### Response
#### Success Response
- **Promise<boolean | undefined>** - Resolves to `true` if recording started successfully, `false` if it failed, or `undefined` if the operation was cancelled or not applicable.

### Response Example
N/A
```

--------------------------------

### Install Optional Dependencies with Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install these optional dependencies using Expo to enable features like gallery access, media playback, file operations, and more.

```bash
npx expo install expo-av expo-video expo-file-system expo-media-library expo-sharing expo-haptics expo-clipboard expo-document-picker expo-image-picker @op-engineering/op-sqlite
```

--------------------------------

### Install expo-audio for Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the expo-audio package using npx for Expo projects for voice recording. Ensure compatibility with your Expo version.

```bash
npx expo install expo-audio
```

--------------------------------

### Install React Compiler Babel Plugin

Source: https://getstream.io/chat/docs/sdk/react-native/guides/react-compiler.md

Install the React Compiler Babel plugin using npm or yarn. This is a necessary step before enabling it in your Babel configuration.

```bash
npm install -D babel-plugin-react-compiler@latest
```

```bash
yarn add -D babel-plugin-react-compiler@latest
```

--------------------------------

### Install Stream Chat LangChain SDK

Source: https://getstream.io/chat/docs/sdk/react-native/guides/ai-integrations/stream-chat-langchain-sdk.md

Install the SDK using npm or yarn. This package provides server-side capabilities for integrating AI agents with Stream Chat.

```bash
npm install @stream-io/chat-langchain-sdk
# or
yarn add @stream-io/chat-langchain-sdk
```

--------------------------------

### Install React Native Firebase and Messaging

Source: https://getstream.io/chat/docs/sdk/react-native/guides/push-notifications.md

Install the necessary packages for React Native Firebase and its messaging module. Ensure you follow the specific setup instructions for Android and iOS.

```sh
yarn add @react-native-firebase/app

yarn add @react-native-firebase/messaging
```

--------------------------------

### initPlayer({ url?, playerRef? })

Source: https://getstream.io/chat/docs/sdk/react-native/guides/audio-playback.md

Initializes the audio player using the provided URL or player reference.

```APIDOC
## initPlayer({ url?, playerRef? })

### Description
Initializes the audio player using the provided URL or provided player reference. For Expo, we pass the URL while for audio playing using `react-native-video`, we pass the player reference.

### Method
`({url?: string, playerRef?: React.RefObject<AudioPlayer>}) => Promise<void>`

### Parameters
#### Request Body
- **url** (string) - Optional - The URL of the audio file.
- **playerRef** (React.RefObject<AudioPlayer>) - Optional - A reference to an existing AudioPlayer instance.

### Request Example
```tsx
await audioPlayer.initPlayer({ url: "https://example.com/audio.mp3" });
```
```

--------------------------------

### Managing Custom Data State

Source: https://getstream.io/chat/docs/sdk/react-native/ui-components/message-composer/composer/message-composer-api.md

Provides examples for getting, updating, and initializing custom message and composer data using the CustomDataManager.

```typescript
// Get current state values
const messageData = customDataManager.customMessageData;
const composerData = customDataManager.customComposerData;

// Update message custom data
customDataManager.setMessageData({
  customField: "value",
});

// Update composer custom data
customDataManager.setCustomData({
  composerField: "value",
});

// Initialize state
customDataManager.initState({ message: existingMessage });
```

--------------------------------

### Implement Channel Pinning UI

Source: https://getstream.io/chat/docs/sdk/react-native/v8/guides/channel-pinning-and-archiving.md

This example shows how to toggle channel pinning based on the `membership.pinned_at` state. It uses `useChannelMembershipState` to get the current pinning status and `channel.pin()` or `channel.unpin()` to update it.

```tsx
import {
  Pressable,
  useChannelMembershipState,
  Pin,
  Unpin,
} from "stream-chat-react-native";

const CustomChannelPreview = ({ channel }) => {
  const membership = useChannelMembershipState(channel);

  return (
    <Pressable
      onPress={async () => {
        if (membership.pinned_at) {
          await channel.unpin();
        } else {
          await channel.pin();
        }
      }}
    >
      {membership.pinned_at ? (
        <Unpin height={24} width={24} pathFill="red" />
      ) : (
        <Pin size={24} />
      )}
    </Pressable>
  );
};
```

--------------------------------

### Add a Custom Message Action

Source: https://getstream.io/chat/docs/sdk/react-native/v8/guides/customize-message-actions.md

Add a new custom message action, 'Mute User', which appears only for messages from other users. This example includes logic to toggle mute/unmute functionality and uses a custom icon and translated title. Ensure the necessary imports and client setup are in place.

```tsx
import {
  messageActions as defaultMessageActions,
  Mute as MuteIcon,
} from "stream-chat-react-native";

<Channel
  channel={channel}
  messageActions={(param) => {
    const { isMyMessage, ownCapabilities, dismissOverlay } = param;
    const actions = defaultMessageActions({ ...param });

    if (!isMyMessage) {
      const isMuted = (client.mutedUsers || []).some(
        (mute) =>
          mute.user.id === client.userID && mute.target.id === message.user?.id,
      );

      actions.push({
        action: async () => {
          dismissOverlay();
          if (message.user?.id) {
            if (isMuted) {
              await client.unmuteUser(message.user.id);
            } else {
              await client.muteUser(message.user.id);
            }
          }
        },
        actionType: "custom-mute-user",
        icon: <MuteIcon />,
        title: isMuted ? t("Custom Unmute User") : t("Custom Mute User"),
      });
    }

    return actions;
  }}
>
  {/** MessageList and MessageInput component here **/
</Channel>
```

--------------------------------

### Initialize Audio Player with URL

Source: https://getstream.io/chat/docs/sdk/react-native/guides/audio-playback.md

Initialize the audio player by providing a URL for the audio source. This is typically used for web-based audio playback.

```tsx
await audioPlayer.initPlayer({ url: "https://example.com/audio.mp3" });
```

--------------------------------

### Install react-native-safe-area-context for Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the react-native-safe-area-context package using npx for Expo projects.

```bash
npx expo install react-native-safe-area-context
```

--------------------------------

### Input Component Usage

Source: https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/input.md

Demonstrates basic usage of the Input component with a title, description, and placeholder.

```APIDOC
## Input Component Usage

### Description
Basic usage of the `Input` component, showcasing its ability to display a title, description, and placeholder text.

### Props
- **variant** (string) - Required - The visual variant of the input container. Use `'outline'` for a bordered input.
- **title** (string) - Optional - Label text displayed above the input.
- **description** (string) - Optional - Descriptive text displayed below the title and above the input field.
- **placeholder** (string) - Optional - Placeholder text displayed within the input field.

### Example
```tsx
import { Input } from "stream-chat-react-native";

<Input
  variant="outline"
  title="Channel Name"
  description="Enter a name for your channel"
  placeholder="e.g. General"
  state="default"
/>;
```
```

--------------------------------

### Registering and Using Middleware

Source: https://getstream.io/chat/docs/sdk/react-native/v8/ui-components/message-input/composer/message-composer-middleware.md

Demonstrates how to define middleware with specific handlers and register it with a MiddlewareExecutor. This example shows handlers for text changes and suggestion item selection.

```typescript
// Define middleware with handlers for different events
const textValidationMiddleware = {
  id: "textValidation",
  handlers: {
    // Handler for text changes
    onChange: async ({ state, next, discard }) => {
      if (state.text.length > 100) {
        return discard();
      }
      return next(state);
    },

    // Handler for suggestion selection
    onSuggestionItemSelect: async ({ state, next, complete }) => {
      // Process suggestion...
      return next(state);
    },
  },
};

// Register middleware with executor
middlewareExecutor.use(textValidationMiddleware);
```

--------------------------------

### Initialize AudioPlayerProvider

Source: https://getstream.io/chat/docs/sdk/react-native/guides/audio-playback.md

Wrap your application's top-level component with `AudioPlayerProvider` to enable audio playback features. Configure `allowConcurrentPlayback` based on your needs.

```tsx
const TopLevelComponent = ({ children }) => {
  return (
    <AudioPlayerProvider value={{ allowConcurrentPlayback: false }}>
      {children}
    </AudioPlayerProvider>
  );
};

```

--------------------------------

### Basic Navigation Container Setup

Source: https://getstream.io/chat/docs/sdk/react-native/basics/stream-chat-with-navigation.md

Wrap your app with OverlayProvider, NavigationContainer, and Chat to make Stream Chat features available globally. Ensure the client is initialized with your API key.

```tsx
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Chat, OverlayProvider } from 'stream-chat-react-native';

const client = StreamChat.getInstance('api_key');
const Stack = createStackNavigator<{ home: undefined }>();

export const App = () =>
  <OverlayProvider>
    <NavigationContainer>
      <Chat client={client}>
        <Stack.Navigator>
          <Stack.Screen component={() => {/** App components */})} name='home' />
        </Stack.Navigator>
      </Chat>
    </NavigationContainer>
  </OverlayProvider>;
```

--------------------------------

### Install attachment sharing dependency for Expo

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install expo-sharing using npx for Expo projects for attachment sharing.

```bash
npx expo install expo-sharing
```

--------------------------------

### Run Android App (Expo)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Command to start the Android application when using Expo.

```bash
yarn run android
```

--------------------------------

### Install react-native-safe-area-context for RN CLI

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the react-native-safe-area-context package using Yarn for React Native CLI projects.

```bash
yarn add react-native-safe-area-context
```

--------------------------------

### General Usage of ThreadList

Source: https://getstream.io/chat/docs/sdk/react-native/ui-components/thread-list.md

Demonstrates the basic setup for rendering the ThreadList component. Ensure it is wrapped within OverlayProvider and Chat components.

```tsx
import { OverlayProvider, Chat, ThreadList } from "stream-chat-react-native";

const App = () => {
  return (
    <OverlayProvider>
      <Chat client={client}>
        <ThreadList />
      </Chat>
    </OverlayProvider>
  );
};

```

--------------------------------

### Op-sqlite Build Error Example

Source: https://getstream.io/chat/docs/sdk/react-native/basics/troubleshooting.md

These are example errors you might encounter when @op-engineering/op-sqlite conflicts with static framework requirements.

```bash
error: Multiple commands produce '<some-path>/op-sqlite/op_sqlite.framework/Headers/libsql.h'
```

```bash
... 
^ include of non-modular header inside framework module
```

--------------------------------

### Install Expo Dependencies for Location Sharing

Source: https://getstream.io/chat/docs/sdk/react-native/guides/location-sharing.md

Install the required packages for location tracking and map rendering when using Expo.

```bash
yarn add expo-location
yarn add react-native-maps
```

--------------------------------

### Configure microphone permission for iOS Info.plist

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Example Info.plist entry for microphone usage description on iOS.

```xml
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) would like to use your microphone for voice recording.</string>
```

--------------------------------

### App Initialization with Custom Attachments

Source: https://getstream.io/chat/docs/sdk/react-native/v8/guides/custom-attachment.md

The main App component handles the initialization of the chat client, user connection, and channel watching. It conditionally renders the ChannelScreen once the chat is ready, ensuring custom attachments are available.

```javascript
export default function App() {
  const [ready, setReady] = useState();

  useEffect(() => {
    const initChat = async () => {
      await connectUserPromise;
      await channel.watch();
      setReady(true);
    };

    initChat();
  }, []);

  if (!ready) {
    return null;
  }

  return (
    <SafeAreaProvider>
      <ChannelScreen channel={channel} />
    </SafeAreaProvider>
  );
}
```

--------------------------------

### Basic Usage of useCreateChatClient

Source: https://getstream.io/chat/docs/sdk/react-native/v8/hooks/chat/use-create-chat-client.md

This snippet demonstrates the fundamental usage of the useCreateChatClient hook. It shows how to initialize the client with API key, user data, and token, and how to handle the loading state before rendering the main application components.

```tsx
import {
  Chat,
  OverlayProvider,
  useCreateChatClient,
} from "stream-chat-react-native";
import { ActivityIndicator, View } from "react-native";

const App = () => {
  const chatClient = useCreateChatClient({
    apiKey: "YOUR_API_KEY",
    userData: {
      id: "YOUR_USER_ID",
      name: "YOUR_USER_NAME",
    },
    tokenOrProvider: "YOUR_TOKEN_OR_PROVIDER",
  });

  if (!chatClient) {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  return (
    <OverlayProvider>
      <Chat client={chatClient}>{/** Your app components */}</Chat>
    </OverlayProvider>
  );
};

```

--------------------------------

### Install Pods for iOS (RN CLI)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Run this command in your terminal to install native dependencies for iOS when using the React Native CLI.

```bash
npx pod-install
```

--------------------------------

### Run iOS App (Expo)

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Command to start the iOS application when using Expo.

```bash
yarn run ios
```

--------------------------------

### Wallpaper Overview Screen Implementation

Source: https://getstream.io/chat/docs/sdk/react-native/guides/channel-background-customization.md

Displays a grid of wallpaper images for user selection. Stores the selected wallpaper URI using MMKV. Navigates back after selection.

```tsx
import { StackNavigationProp } from "@react-navigation/stack";
import { RouteProp } from "@react-navigation/native";
import { useMMKVObject } from "react-native-mmkv";
import { View, SafeAreaView, Pressable, Image, StyleSheet } from "react-native";

const WallpaperOverviewScreen = ({ 
  navigation: { goBack }, 
  route: {
    params: { channelId }, 
  },
}: WallpaperOverviewScreenProps) => {
  const [_, setChannelPreferences] = 
    useMMKVObject<ChannelPreferences>(channelId);
  return (
    <SafeAreaView
      style={{
        flex: 1,
        justifyContent: "center",
      }}
    >
      <View style={styles.container}>
        {BRIGHT_IMAGES?.map(({ imageUri = "" }, i) => {
          const handleOnPress = () => {
            setChannelPreferences({ imageUri });
            goBack();
          };
          return (
            <Pressable
              key={i}
              onPress={handleOnPress}
              style={{
                margin: 1,
                width: GRID_ITEM_WIDTH,
              }}
            >
              <Image style={styles.image} source={{ uri: imageUri }} />
            </Pressable>
          );
        })}
      </View>
    </SafeAreaView>
  );
};

type StackNavigatorParamList = {
  Channel: undefined;
  WallpaperOverviewScreen: {
    channelId: string;
  };
};

type WallpaperOverviewScreenProps = {
  navigation: StackNavigationProp<
    StackNavigatorParamList,
    "WallpaperOverviewScreen"
  >;
  route: RouteProp<StackNavigatorParamList, "WallpaperOverviewScreen">;
};

type ChannelPreferences = {
  imageUri: string;
};

const GRID_ITEM_WIDTH = "32.7%";

// Some random images that will get you started
const BRIGHT_IMAGES = [
  "https://images.unsplash.com/photo-1549125764-91425ca48850?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8NjF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1549241520-425e3dfc01cb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8ODB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1550006490-9f0656b79e9d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8ODl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1551506448-074afa034c05?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTEzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1553114835-6f7674d3c2c0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTMyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1553075712-453f7213c24f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTMzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1551917951-148edcd8ea8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTU3fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1553969923-bbf0cac2666b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MjA3fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1553194642-29b272a173b9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTcwfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1553356084-58ef4a67b2a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTcxfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
  "https://images.unsplash.com/photo-1553526777-5ffa3b3248d8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8MTk4fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60",
].map((imageUri) => ({ 
  imageUri,
}));

const styles = StyleSheet.create({
  container: {
    flexDirection: "row",
    flex: 1,
    alignContent: "stretch",
    flexWrap: "wrap",
    padding: 6,
  },
  image: {
    flex: 1,
    width: "100%",
  },
});
```

--------------------------------

### Install react-native-video for RN CLI

Source: https://getstream.io/chat/docs/sdk/react-native/basics/installation.md

Install the react-native-video package using Yarn for React Native CLI projects to enable video playing.

```bash
yarn add react-native-video
```
Tokens:
Raw