### Clean Install and Start App (< 3.0.0)

Source: https://github.com/getstream/stream-chat-react-native/wiki/Dev-setup-for-contributing-to-the-library

Perform a clean installation of your app's dependencies and restart the development server with a cache reset.

```bash
rm -rf node_modules
rm yarn.lock
yarn install
watchman watch-del-all
yarn start --reset-cache
```

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

### Open and Link Example App (>= 3.0.0)

Source: https://github.com/getstream/stream-chat-react-native/wiki/Dev-setup-for-contributing-to-the-library

Navigate to the example app directory, link the library, install dependencies, and run the app on iOS or Android.

```bash
cd stream-chat-react-native; yarn link; cd examples/TypescriptMessaging; yarn link stream-chat-react-native; yarn; npx pod-install; npx react-native run-ios # npx react-native run-android
```

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

### Clone and Setup React Native Chat Tutorial

Source: https://github.com/getstream/stream-chat-react-native/wiki/Tutorial-v3.0

Clone the starter repository, install dependencies, and set up native dependencies for iOS.

```sh
git clone https://github.com/GetStream/react-native-chat-tutorial.git
cd react-native-chat-tutorial
yarn
npx pod-install
```

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

### Install Dependencies in SampleApp Directory

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/SampleApp/README.md

Navigate to the 'examples/SampleApp' directory and install its dependencies.

```bash
cd ../../examples/SampleApp && yarn install
```

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

### Start the Application

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/SampleApp/README.md

Run this command to start the application, typically for development.

```bash
yarn start
```

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

### Install Project Dependencies

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/ExpoMessaging/README.md

Install dependencies in the root, package, expo-package, and example directories.

```bash
yarn install
```

```bash
cd package && yarn install
```

```bash
cd expo-package && yarn install
```

```bash
cd ../../examples/ExpoMessaging && yarn install
```

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

### Install Pods for iOS

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/SampleApp/README.md

Navigate to the 'ios' directory and install the necessary pods.

```bash
cd ios && pod install
```

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

### Install Dependencies in Package Directory

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/SampleApp/README.md

Navigate to the 'package' directory and install its dependencies.

```bash
cd package && yarn install
```

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

### Start Sample App

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/CLAUDE.md

Starts the Metro bundler for the sample application. Can also be used to run the app on iOS or Android devices.

```bash
yarn workspace sampleapp start    # Metro bundler (alias: cd examples/SampleApp && yarn start)
yarn workspace sampleapp ios      # Run iOS
yarn workspace sampleapp android  # Run Android
```

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

### Install TypeScript Messaging App Dependencies

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/TypeScriptMessaging/README.md

Navigate to the 'examples/TypeScriptMessaging' directory and install its dependencies.

```bash
cd ../../examples/TypeScriptMessaging && yarn install
```

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

### Install Root Dependencies

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/SampleApp/README.md

Install the main project dependencies in the root directory.

```bash
yarn install
```

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

### Install Dependencies in Native Package Directory

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/SampleApp/README.md

Navigate to the 'native-package' directory and install its dependencies.

```bash
cd native-package && yarn install
```

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

### Full Project Build

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/AGENTS.md

Performs a full build of the project, including dependency installation.

```bash
yarn install-all
```

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

### App.js - Full Example for Multiple Conversations

Source: https://github.com/getstream/stream-chat-react-native/wiki/Tutorial-v3.0

This code sets up the main App component for a React Native chat application, enabling multiple conversations. It includes user authentication, navigation setup with Stack Navigator, and integration of Stream Chat components like ChannelList and Channel.

```jsx
/* eslint-disable react/display-name */
/* eslint-disable react/display-name */
import React, {useContext, useEffect, useMemo, useState} from 'react';
import {LogBox, SafeAreaView, StyleSheet, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator, useHeaderHeight} from '@react-navigation/stack';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
import {StreamChat} from 'stream-chat';
import {
  Channel,
  ChannelList,
  Chat,
  MessageInput,
  MessageList,
  OverlayProvider,
  useAttachmentPickerContext,
} from 'stream-chat-react-native';

LogBox.ignoreAllLogs(true);

const chatClient = StreamChat.getInstance('q95x9hkbyd6p');
const userToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c';
const user = {
  id: 'ron',
};

const filters = {
  example: 'example-apps',
  members: {$in: ['ron']},
  type: 'messaging',
};

const sort = {last_message_at: -1};

const ChannelListScreen = ({navigation}) => {
  const {setChannel} = useContext(AppContext);

  const memoizedFilters = useMemo(() => filters, []);

  return (
    <Chat client={chatClient}>
      <View style={StyleSheet.absoluteFill}>
        <ChannelList
          filters={memoizedFilters}
          onSelect={(channel) => {
            setChannel(channel);
            navigation.navigate('Channel');
          }}
          sort={sort}
        />
      </View>
    </Chat>
  );
};

const ChannelScreen = ({navigation}) => {
  const {channel} = useContext(AppContext);
  const headerHeight = useHeaderHeight();
  const {setTopInset} = useAttachmentPickerContext();

  useEffect(() => {
    setTopInset(headerHeight);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [headerHeight]);

  return (
    <SafeAreaView>
      <Chat client={chatClient}>
        <Channel channel={channel} keyboardVerticalOffset={headerHeight}>
          <View style={StyleSheet.absoluteFill}>
            <MessageList />
            <MessageInput />
          </View>
        </Channel>
      </Chat>
    </SafeAreaView>
  );
};

const Stack = createStackNavigator();

const AppContext = React.createContext();

const App = () => {
  const {bottom} = useSafeAreaInsets();

  const [channel, setChannel] = useState();
  const [clientReady, setClientReady] = useState(false);

  useEffect(() => {
    const setupClient = async () => {
      await chatClient.connectUser(user, userToken);

      setClientReady(true);
    };

    setupClient();
  }, []);

  return (
    <NavigationContainer>
      <AppContext.Provider value={{channel, setChannel}}>
        <OverlayProvider bottomInset={bottom}>
          {clientReady && (
            <Stack.Navigator
              initialRouteName="ChannelList"
              screenOptions={{
                headerTitleStyle: {alignSelf: 'center', fontWeight: 'bold'},
              }}>
              <Stack.Screen
                component={ChannelScreen}
                name="Channel"
                options={() => ({
                  headerBackTitle: 'Back',
                  headerRight: () => <></>,
                  headerTitle: channel?.data?.name,
                })}
              />
              <Stack.Screen
                component={ChannelListScreen}
                name="ChannelList"
                options={{headerTitle: 'Channel List'}}
              />
            </Stack.Navigator>
          )}
        </OverlayProvider>
      </AppContext.Provider>
    </NavigationContainer>
  );
};

export default () => {
  return (
    <SafeAreaProvider>
      <App />
    </SafeAreaProvider>
  );
};

```

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

### Install react-native-image-crop-picker

Source: https://github.com/getstream/stream-chat-react-native/wiki/Upgrade-helper

Install the new image picker dependency and update iOS pods. Remove the old dependency if no longer needed.

```sh
yarn remove react-native-image-picker # Remove previous dependency if you don't need it
yarn add react-native-image-crop-picker
cd ios && pod install && cd ..

```

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

### Install Dependencies with Yarn

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/CLAUDE.md

Installs all workspace dependencies using Yarn. Use the --immutable flag for CI environments to prevent lockfile changes.

```bash
yarn install                  # Set up every workspace (single root lockfile)
yarn install --immutable      # CI-style; fail if yarn.lock would change
```

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

### Install Dependencies in Package

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/AGENTS.md

Installs dependencies within a specific package directory.

```bash
cd package
yarn install-all && cd ..
```

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

### Install Stream Chat React Native

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Install the main Stream Chat React Native package using yarn.

```bash
yarn add stream-chat-react-native
```

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

### Metro Config Blacklist Path Example (< 3.0.0)

Source: https://github.com/getstream/stream-chat-react-native/wiki/Dev-setup-for-contributing-to-the-library

Example path to add to the metro.config.js blacklist. This path is used when the app and stream-chat-react-native are under a common parent directory.

```bash
repoDir + '/stream-chat-react-native/examples/NativeMessaging/.*',
```

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

### Complete Chat Screen Structure

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

An example demonstrating the integration of OverlayProvider, Chat, Channel, MessageList, and MessageInput to form a complete chat screen.

```tsx
<OverlayProvider
  bottomInset={bottom}
  i18nInstance={streami18n}
>
  <Chat client={chatClient} i18nInstance={streami18n}>
    <Channel
      channel={channel}
      keyboardVerticalOffset={headerHeight}
    >
      <View style={{ flex: 1 }}>
        <MessageList />
        <MessageInput />
      </View>
    </Channel>
  </Chat>
</OverlayProvider>
```

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

### Basic OverlayProvider Usage with React Navigation

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Wrap your navigation stack with OverlayProvider to enable overlay features. This example assumes React Navigation is used.

```tsx
<NavigationContainer>
  <OverlayProvider>
    <Stack.Navigator>
      <Stack.Screen />
    </Stack.Navigator>
  </OverlayProvider>
</NavigationContainer>
```

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

### OverlayProvider with Full Generics

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Example of OverlayProvider with all 7 possible generics explicitly provided for type safety. Generics can often be inferred from props.

```tsx
<NavigationContainer>
  <OverlayProvider<
    AttachmentType,
    ChannelType,
    CommandType,
    EventType,
    MessageType,
    ResponseType,
    UserType
  >>
    <Stack.Navigator>
      <Stack.Screen />
    </Stack.Navigator>
  </OverlayProvider>
</NavigationContainer>
```

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

### Clean Build Artifacts and Dependencies

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/AGENTS.md

Run these commands to clean up build artifacts and dependencies, particularly for Xcode and CocoaPods, when experiencing build or installation failures.

```bash
watchman watch-del-all && rm -rf ~/Library/Developer/Xcode/DerivedData/*
```

```bash
(cd ios && bundle exec pod install)
```

```bash
npx expo prebuild
```

```bash
rm -rf ios && rm -rf android
```

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

### Custom Reaction List with Picker Wrapper

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(2.x.x)

Creates a custom reaction list component and wraps it with `ReactionPickerWrapper` to enable opening the reaction picker on touch. This example assumes `renderReactions` and `StyleSheet` are imported.

```javascript
import { renderReactions, MessageSimple } from 'stream-chat-react-native';

const reactionListStyles = StyleSheet.create({
  container: {
    backgroundColor: 'black',
    flexDirection: 'row',
    borderColor: 'gray',
    borderWidth: 1,
    padding: 5,
    borderRadius: 10,
  },
});

const CustomReactionList = props => (
    <View style={reactionListStyles.container}>
      {renderReactions(
        props.message.latest_reactions,
        props.supportedReactions,
      )}
    </View>
)

const MessageFooterWithReactionList = props => {
  return (
    <ReactionPickerWrapper {...props}>
      {props.message.latest_reactions.length > 0 && <CustomReactionList {...props} />}
    </ReactionPickerWrapper>
  );
};

const MessageWithReactionsAtBottom = props => {
  return (
    <MessageSimple
      {...props}
      ReactionList={null}
      MessageFooter={MessageFooterWithReactionList}
    />
  );
};

```

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

### React Navigation Setup for Thread Screen

Source: https://github.com/getstream/stream-chat-react-native/wiki/Tutorial-v3.0

Configure your React Navigation stack to include a screen for displaying message threads. This setup assumes you are using Stack Navigator.

```javascript
              <Stack.Screen component={ChannelListScreen}
                name="ChannelList"
                options={{headerTitle: 'Channel List'}}
              />
              <Stack.Screen component={ThreadScreen} name="Thread" />
            </Stack.Navigator>
          )}
        </OverlayProvider>
      </AppContext.Provider>
    </NavigationContainer>
  );
};

export default () => {
  return (
    <SafeAreaProvider>
      <App />
    </SafeAreaProvider>
  );
};
```

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

### Clone the Stream Chat React Native Project

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/ExpoMessaging/README.md

Clone the official repository to access the example applications.

```bash
git clone https://github.com/GetStream/stream-chat-react-native.git
```

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

### Setup WebSocket Connection (stream-chat < 3.5.1)

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Re-establish the WebSocket connection when the app is re-opened (brought to foreground). This is for versions of stream-chat less than 3.5.1.

```javascript
// < stream-chat@3.5.1
await client._setupConnection();
```

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

### Run React Native Application

Source: https://github.com/getstream/stream-chat-react-native/wiki/Tutorial-v3.0

Starts the React Native development server to run the application on iOS. The server will live reload the application upon code changes.

```bash
react-native run-ios
```

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

### Channel Screen Setup with Location Sharing

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Main ChannelScreen component configuration that includes the custom LocationCard and InputButtons for location sharing functionality.

```javascript
const ChannelScreen = () => {
  const {bottom} = useSafeAreaInsets();

  return (
    <ChatOverlayProvider bottomInset={bottom} topInset={0}>
      <SafeAreaView>
        <Chat client={chatClient}>
          {/* Setting keyboardVerticalOffset as 0, since we don't have any header yet */}
          <Channel
            channel={channel}
            keyboardVerticalOffset={0}
            Card={LocationCard}
            InputButtons={InputButtons}> 
            <View style={StyleSheet.absoluteFill}>
              <MessageList />
              <MessageInput />
            </View>
          </Channel>
        </Chat>
      </SafeAreaView>
    </ChatOverlayProvider>
  );
};
```

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

### Install Peer Dependencies for Stream Chat React Native

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Install all required peer dependencies for Stream Chat React Native to leverage its full feature set.

```bash
yarn add @react-native-community/blur @react-native-community/cameraroll @react-native-community/netinfo @stream-io/flat-list-mvcp react-native-document-picker react-native-fs react-native-gesture-handler react-native-haptic-feedback react-native-haptic-feedback react-native-image-crop-picker react-native-image-resizer react-native-reanimated@2.0.0-rc.0 react-native-safe-area-context react-native-share react-native-svg
```

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

### Installing Pod Dependencies in React Native iOS Projects

Source: https://github.com/getstream/stream-chat-react-native/wiki/Upgrade-helper

Following React Native 0.60's adoption of CocoaPods by default for iOS projects, it's necessary to install all pod dependencies. This command should be run from the 'ios' directory of your project.

```bash
cd ios && pod install && cd ..
```

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

### Define Message with Attachments

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Example of a message object with an array of attachments, specifying types like 'image' and 'file'.

```javascript
const messageObject = {
  id: '12312jh3b1jh2b312',
  text: 'This is my test message!',
  attachments: [
    {
      type: 'image',
      thumb_url: ''
    },
    {
      type: 'file',
      asset_url: ''
    }
  ]
}
```

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

### Applying Custom Theme and MessageInput

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(2.x.x)

Apply custom theme styles to the MessageInput component and pass the custom InputBox component to it within the Chat and Channel providers. This example shows how to integrate the custom input layout.

```javascript
const theme = {
  'messageInput.container':
    'border-top-color: #979A9A;border-top-width: 0.4; background-color: white; margin: 0; border-radius: 0;',
}

<Chat client={chatClient} style={theme}>
  <Channel>
    <MessageList />
    <MessageInput Input={InputBox} />
  </Channel>
</Chat>
```

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

### Capture Hermes CPU Profile via Script

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/perf/README.md

Use this script to automatically connect to Metro's Hermes target, start profiling, and save a .cpuprofile file. It also auto-runs the analyzer.

```shell
node perf/capture-hermes-profile.js
```

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

### Analyze a Single CPU Profile

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/perf/README.md

Analyze a captured .cpuprofile file to get a summary, time breakdown by category and source file, and top functions by self and total time. Ensure the profile is captured in dev mode for intact function names.

```shell
node perf/analyze-cpuprofile.js perf/profiles/baseline.cpuprofile
```

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

### Instagram-style Double-Tap Reaction

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(2.x.x)

Implement a double-tap gesture to send a 'love' reaction and customize message actions. This example requires a custom `handleReaction` prop to be passed down.

```javascript
import { MessageSimple } from 'stream-chat-react-native';

const MessageSimpleIgReaction = (props) => {
  let lastTap = null;
  const handleDoubleTap = () => {
    const now = Date.now();
    if (lastTap && now - lastTap < 300) {
      props.handleReaction('love');
    } else {
      lastTap = now;
    }
  };

  return (
    <MessageSimple
      {...props}
      onPress={handleDoubleTap}
      supportedReactions={
        [
          {
            id: 'love',
            icon: '❤️️',
          },
        ]
      }
      messageActions={['edit', 'delete', 'reply']} // not including `reactions` here.
    />
  );
};

```

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

### Full Chat Example with Background Notification Handling

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(1.x.x)

A complete React Native component demonstrating Stream Chat integration, AppState management, and local push notifications for background messages. Ensure you have `react-native-push-notification` configured.

```javascript
import React, { useEffect, useState } from "react";
import { AppState, StyleSheet, Text, View } from "react-native";
import PushNotifications from 'react-native-push-notification';

const ChatExample = () => {
  const [appState, setAppState] = useState(AppState.currentState);
  const [client, setClient] = useState(null);

  useEffect(() => {
    const setupClient = async () => {
      const client = new StreamChat("API_KEY");
      await client.setUser({id: 'userId'}, 'token');

      client.on('message.new', _handleMessageNewEvent)
      client.on('notification.message_new', _handleMessageNewEvent)

      setClient(client);
    }

    setupClient();

    return () => {
      client.off('message.new');
      client.off('notification.message_new');
    }
  }, [])

  useEffect(() => {
    PushNotification.configure({ /** push notification config */ })
    AppState.addEventListener("change", _handleAppStateChange);

    return () => {
      AppState.removeEventListener(
```

```javascript
change", _handleAppStateChange);
    };
  }, []);

  const _handleAppStateChange = nextAppState => {
    if (appState.match(/inactive|background/) && nextAppState === "active") {
      console.log("App has come to the foreground!");
    }
    setAppState(nextAppState);
  };

  const _handleMessageNewEvent = event => {
    // If the app is on foreground, then do nothing.
    if (appState === 'active') return;

    // If app is on background, then generate a local notification.
    PushNotification.localNotification({
      bigText: event.message.text
    });
  }

  if (!client) return null;

  return (
    <View style={styles.container}>
      <Chat client={client}>
        {/** All the chat components */}
      </Chat>
    </View>
  );
};

```

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

### React Native Chat App Setup with Message Threads

Source: https://github.com/getstream/stream-chat-react-native/wiki/Tutorial-v3.0

This snippet sets up a basic React Native chat application using Stream Chat, including channel list, message list, and thread components. It demonstrates connecting a user and configuring navigation for channels and threads.

```jsx
/* eslint-disable react/display-name */
import React, {useContext, useEffect, useMemo, useState} from 'react';
import {LogBox, SafeAreaView, StyleSheet, View} from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator, useHeaderHeight} from '@react-navigation/stack';
import {
  SafeAreaProvider,
  useSafeAreaInsets,
} from 'react-native-safe-area-context';
import {StreamChat} from 'stream-chat';
import {
  Channel,
  ChannelList,
  Chat,
  MessageInput,
  MessageList,
  OverlayProvider,
  Thread,
  useAttachmentPickerContext,
} from 'stream-chat-react-native';

LogBox.ignoreAllLogs(true);


const chatClient = StreamChat.getInstance('q95x9hkbyd6p');
const userToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoicm9uIn0.eRVjxLvd4aqCEHY_JRa97g6k7WpHEhxL7Z4K4yTot1c';
const user = {
  id: 'ron',
};

const filters = {
  example: 'example-apps',
  members: {$in: ['ron']},
  type: 'messaging',
};
const sort = {last_message_at: -1};

const ChannelListScreen = ({navigation}) => {
  const {setChannel} = useContext(AppContext);

  const memoizedFilters = useMemo(() => filters, []);

  return (
    <Chat client={chatClient}>
      <View style={StyleSheet.absoluteFill}>
        <ChannelList
          filters={memoizedFilters}
          onSelect={(channel) => {
            setChannel(channel);
            navigation.navigate('Channel');
          }}
          sort={sort}
        />
      </View>
    </Chat>
  );
};

const ChannelScreen = ({navigation}) => {
  const {channel, setThread, thread} = useContext(AppContext);
  const headerHeight = useHeaderHeight();
  const {setTopInset} = useAttachmentPickerContext();

  useEffect(() => {
    setTopInset(headerHeight);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [headerHeight]);

  return (
    <SafeAreaView>
      <Chat client={chatClient}>
        <Channel
          channel={channel}
          keyboardVerticalOffset={headerHeight}
          thread={thread}>
          <View style={StyleSheet.absoluteFill}>
            <MessageList
              onThreadSelect={(thread) => {
                setThread(thread);
                navigation.navigate('Thread', {
                  channelId: channel.id,
                });
              }}
            />
            <MessageInput />
          </View>
        </Channel>
      </Chat>
    </SafeAreaView>
  );
};

const ThreadScreen = ({route}) => {
  const {thread} = useContext(AppContext);
  const [channel] = useState(
    chatClient.channel('messaging', route.params.channelId),
  );
  const headerHeight = useHeaderHeight();

  return (
    <SafeAreaView>
      <Chat client={chatClient}>
        <Channel
          channel={channel}
          keyboardVerticalOffset={headerHeight}
          thread={thread}>
          <View style={StyleSheet.absoluteFill}>
            <Thread thread={thread} />
          </View>
        </Channel>
      </Chat>
    </SafeAreaView>
  );
};

const Stack = createStackNavigator();
const AppContext = React.createContext();

const App = () => {
  const {bottom} = useSafeAreaInsets();

  const [channel, setChannel] = useState();
  const [clientReady, setClientReady] = useState(false);
  const [thread, setThread] = useState();

  useEffect(() => {
    const setupClient = async () => {
      await chatClient.connectUser(user, userToken);

      setClientReady(true);
    };

    setupClient();
  }, []);

  return (
    <NavigationContainer>
      <AppContext.Provider value={{channel, setChannel, setThread, thread}}>
        <OverlayProvider bottomInset={bottom}>
          {clientReady && (
            <Stack.Navigator
              initialRouteName="ChannelList"
              screenOptions={{
                headerTitleStyle: {alignSelf: 'center', fontWeight: 'bold'},
              }}>
              <Stack.Screen
                component={ChannelScreen}
                name="Channel"
                options={() => ({
                  headerBackTitle: 'Back',
                  headerRight: () => <></>,
                  headerTitle: channel?.data?.name,
                })}/>
              <Stack.Screen

```

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

### Creating and Using the Channel Component

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Demonstrates how to create a channel instance and use the Channel component with essential props like channel, keyboardVerticalOffset, and thread.

```tsx
const channel = client.channel('type', 'id');
const headerHeight = useHeaderHeight();
const { thread } = useContext(AppContext);

<Channel
  channel={channel}
  keyboardVerticalOffset={headerHeight}
  thread={thread}
>
```

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

### Verification: Lint and Tests

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/ai-docs/ai-migration.md

Execute the project's linting and testing commands if they are configured. This step is crucial for ensuring code quality and functionality.

```bash
# 6. Lint + tests if the project has them.
yarn lint
yarn test
```

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

### Install Expo Dependencies for Stream Chat React Native

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Install the necessary Stream Chat Expo package and other required community dependencies for Expo projects.

```sh
expo install stream-chat-expo
expo install @react-native-community/netinfo expo-blur expo-document-picker expo-file-system expo-haptics expo-image-manipulator expo-image-picker expo-media-library expo-permissions expo-sharing react-native-gesture-handler react-native-reanimated react-native-safe-area-context react-native-svg
```

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

### Import react-native-get-random-values

Source: https://github.com/getstream/stream-chat-react-native/wiki/Upgrade-helper

Install the react-native-get-random-values library and import it in your index.js file.

```javascript
import 'react-native-get-random-values';

```

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

### Build SDK Packages

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/CLAUDE.md

Builds the main SDK packages, generating CommonJS, ES Modules, and TypeScript type definitions.

```bash
yarn build                                          # SDK build (commonjs + esm + types)
yarn workspace stream-chat-react-native-core build  # Same, explicit form
```

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

### Generate Debug Keystore for Android

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/SampleApp/README.md

Command to generate a debug keystore if the default one is not found, resolving a common Android signing error. This command should be run in the 'android/app/' directory.

```bash
keytool -genkey -v -keystore debug.keystore -storepass android -alias androiddebugkey -keypass android -keyalg RSA -keysize 2048 -validity 10000
```

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

### Provide Custom Attachment Components to Channel

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Example of passing custom attachment rendering components as props to the Channel component.

```jsx
<Channel
  Gallery={CustomGallery}
  Giphy={CustomGiphy}
  FileAttachment={CustomFileAttachment}
  UrlPreview={CustomUrlPreview}
>
```

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

### Clone the Repository

Source: https://github.com/getstream/stream-chat-react-native/wiki/Dev-setup-for-contributing-to-the-library

Clone your forked stream-chat-react-native repository to your local machine.

```bash
git clone https://github.com/{github-user-id}/stream-chat-react-native.git
```

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

### Instantiate StreamChat Client with All Generics

Source: https://github.com/getstream/stream-chat-react-native/wiki/Typescript-support

Initialize the StreamChat client with all seven optional generics for full type customization. Replace 'YOUR_API_KEY' and 'API_KEY_SECRET' with your actual credentials.

```typescript
const client = new StreamChat<
  AttachmentType,
  ChannelType,
  CommandType,
  EventType,
  MessageType,
  ReactionType,
  UserType
>('YOUR_API_KEY', 'API_KEY_SECRET');
```

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

### Lint Project

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/AGENTS.md

Runs ESLint to check for code style and potential errors.

```bash
yarn lint
```

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

### Faded Chat with Video Background

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Integrate chat with a video background using MaskedView and LinearGradient for a fading effect. Ensure MaskedView and LinearGradient are installed.

```jsx
import React from 'react';
import { SafeAreaView, StyleSheet, View } from 'react-native';

// Make sure you have installed following two dependencies
import MaskedView from '@react-native-community/masked-view';
import LinearGradient from 'react-native-linear-gradient';

import { Chat, Channel, MessageList } from 'stream-chat-react-native';

const theme = {
  messageList: {
    container: {
      backgroundColor: 'transperant',
    },
  },
  messageSimple: {
    content: {
      textContainer: {
        backgroundColor: 'white',
      },
    },
  },
};

// When you render your chat screen
<SafeAreaView style={{ flex: 1 }}>
  {/* For the sake of example, we are using image as background, you can replace it with your Video component. */}
  <Image source={{
    uri: 'https://i.pinimg.com/474x/59/a2/aa/59a2aae82b34bace9dc4d4df90457a3b.jpg'
  }} style={{ height: '100%', width: '100%' }} />

  <View style={[{ position: 'absolute' }, StyleSheet.absoluteFillObject]}>
    <Chat client={chatClient} style={theme}>
      <Channel
        channel={channel}
        keyboardVerticalOffset={headerHeight}
        thread={thread}
      >
        <View style={{ flex: 1 }} />
        <View style={{ flex: 2 }}>
          <MaskedView
            style={{ flex: 1 }}
            maskElement={
              <LinearGradient
                colors={['rgba(0,0,0,0)', 'rgba(0,0,0,1)']}
                style={{
                  flex: 1,
                }}
                start={{ x: 0, y: 0 }}
                end={{ x: 0, y: 1 }}
                locations={[0, 0.5]}
              />
            }>
            <MessageList />
          </MaskedView>
        </View>
        <MessageInput />
      </Channel>
    </Chat>
  </View>
</SafeAreaView>
```

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

### Assign Custom Card Component to Channel

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Example of passing a custom Card component as a prop to the Channel component to handle custom attachment types.

```jsx
<Channel Card={CustomCardComponent} />
```

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

### Run Unit Tests

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/CLAUDE.md

Executes all unit tests for the SDK. Coverage reports can be generated with `yarn test:coverage`. Individual test files can be run by specifying their path.

```bash
yarn test:unit                                          # All unit tests (sets TZ=UTC)
yarn test:coverage                                      # With coverage report
yarn workspace stream-chat-react-native-core test:unit  # Same as `yarn test:unit`
cd package && TZ=UTC npx jest path/to/test.test.tsx     # Single test file
```

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

### Pass Additional Props to MessageList FlatList

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(2.x.x)

Customize the underlying FlatList of the MessageList component by passing additional props via 'additionalFlatListProps'. This example enables 'bounces'.

```javascript
<MessageList additionalFlatListProps={{ bounces: true }} />
```

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

### Run Unit Tests

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/AGENTS.md

Executes unit tests using Jest.

```bash
yarn test:unit
```

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

### Pass Additional Props to ChannelList FlatList

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(2.x.x)

Customize the underlying FlatList of the ChannelList component by passing additional props via 'additionalFlatListProps'. This example enables 'bounces'.

```javascript
<ChannelList
    filters={filters}
    sort={sort}
    additionalFlatListProps={{ bounces: true }}
  />
```

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

### Migrating Channel and Thread Components to WithComponents (v8 to v9)

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/ai-docs/ai-migration.md

Illustrates the structural change in how components like Channel, ChannelList, and Thread are configured. Before v9, components were passed as direct props. After v9, they are managed through the `overrides` prop of the `WithComponents` wrapper.

```tsx
<Chat client={client} LoadingIndicator={CustomChatLoading}>
  <ChannelList Preview={CustomPreview} />
  <Channel channel={channel} Message={CustomMessage} SendButton={CustomSendButton} DateHeader={CustomDateHeader}>
    <MessageList />
    <MessageComposer />
    <Thread MessageComposer={CustomThreadComposer} />
  </Channel>
</Chat>
```

```tsx
<WithComponents
  overrides={{
    ChatLoadingIndicator: CustomChatLoading, // renamed: see below
    Preview: CustomPreview,
    Message: CustomMessage,
    SendButton: CustomSendButton,
    DateHeader: CustomDateHeader,
    ThreadMessageComposer: CustomThreadComposer, // renamed: see below
  }}>
  <Chat client={client}>
    <ChannelList />
    <Channel channel={channel}>
      <MessageList />
      <MessageComposer />
      <Thread />
    </Channel>
  </Chat>
</WithComponents>
```

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

### Analyze CPU Profile with Specific Functions

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/perf/README.md

Perform an analysis of a CPU profile, focusing on specific functions by providing their names as arguments. This helps in drilling down into the performance of particular parts of the code.

```shell
node perf/analyze-cpuprofile.js perf/profiles/x.cpuprofile \
  --inside MessageWithContext,useCreateMessageContext,renderText
```

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

### Modify TextInput Props in MessageInput

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Allows direct modification of the internal TextInput component's props within the MessageInput. This example demonstrates how to pass additional props to the TextInput.

```tsx
<MessageInput additionalTextInputProps={{ multiline: true, numberOfLines: 4 }} />
```

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

### Override editMessage Action

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Customizes the 'edit message' action within the Channel component. This example logs the message text and displays a custom icon and title for the edit action.

```tsx
<Channel
  channel={channel}
  editMessage={(message) => ({
    action: () => console.log(message.text),
    icon: <StreamReaction />,
    title: 'Custom Edit',
    titleStyle: { color: '#005FFF' },
  })}
  keyboardVerticalOffset={headerHeight}
  thread={thread}
>
```

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

### Define Custom Theme for File Attachment

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Customize the styling of the FileAttachment component by providing a theme object with specific style overrides. This example targets the 'container' and 'icon' styles.

```typescript
import type { DeepPartial, Theme } from 'stream-chat-react-native';

const theme: DeepPartial<Theme> = {
  messageSimple: {
    file: {
      container: {
        backgroundColor: 'red',
      },
      icon: {
        height: 16,
        width: 16,
      },
    },
  },
};

<Chat style={theme}>
</Chat>
```

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

### Detect WithComponents Migration

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/ai-docs/ai-migration.md

Use this command to detect if a migration for WithComponents is needed. It searches for specific component usages within the source code.

```bash
# §3.1 — WithComponents migration needed?
rg '<(Channel|ChannelList|Chat|Thread)\s[^>]*\b([A-Z]\w+)=\{' src/
```

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

### Customize MessageInput Component

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-v3.0

Replaces the default MessageInput component with a custom one, allowing for complete control over its appearance and behavior. This example renders a red view instead of the default input.

```tsx
<Channel
  channel={channel}
  Input={() => null}
  keyboardVerticalOffset={headerHeight}
  Message={CustomMessageComponent}
>
  <View style={{ flex: 1 }}>
    <MessageList />
    <MessageInput
      Input={() => <View style={{ height: 40, backgroundColor: 'red' }} />}
    />
  </View>
</Channel>
```

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

### Separate File and Image Picker Buttons

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(1.x.x)

Use _pickFile() and _pickImage() props on InputBox to create separate buttons for file and image pickers.

```javascript
const InputBox = props => {
  return (
    <View style={inputBoxStyles.container}>
        {/** Here you will put all the other components such as AutoCompleteInput **}
        {/** Following button will only open filePicker **}
        <Button onPress={props._pickFile()} />
        {/** Following button will only open image picker **}
        <Button onPress={props._pickImage()} />
    </View>
  );
};

// And then pass this InputBox to MessageInput

<MessageInput Input={InputBox} />
```

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

### Override Message Deletion Handler with Alert

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(2.x.x)

This example demonstrates how to override the `handleDelete` prop of `MessageSimple` to show a confirmation alert before deleting a message. It uses React Native's Alert API.

```javascript
import {
  Alert
} from 'react-native';
import { MessageSimple } from 'stream-chat-react-native';

const MessageSimpleModified = (props) => {
  const onDelete = () => {
    // Custom behaviour
    // If you face the issue of Alert disappearing instantly,
    // then refer to this answer:
    // https://stackoverflow.com/a/40041564/1460210
    Alert.alert(
      'Deleting message',
      'Are you sure you want to delete the message?',
      [
        {
          text: 'Cancel',
          onPress: () => console.log(`Message won't be deleted`),
          style: 'cancel',
        },
        {
          text: 'OK',
          onPress: () => {
            // If user says ok, then go ahead with
            // deleting the message.
            props.handleDelete();
          },
        },
      ],
      { cancelable: false },
    );
    // Continue with original handler.
  };

  return <MessageSimple {...props} handleDelete={onDelete} />;
};
```

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

### Run Expo Chat App on Android

Source: https://github.com/getstream/stream-chat-react-native/blob/develop/examples/ExpoMessaging/README.md

Execute this command to run the application on an Android emulator or device.

```bash
yarn android
```

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

### Customize Input Box Max Height

Source: https://github.com/getstream/stream-chat-react-native/wiki/Cookbook-(2.x.x)

Override the default max-height of the inner TextInput within the message input component to allow for larger content. This example demonstrates how to set a custom max-height of 250px.

```javascript
const theme = {
  'messageInput.inputBox': 'max-height: 250px',
}

class ChannelScreen extends React.Component {
  constructor(props) {
    this.state = {
      height: 40,
    }
  }

  updateSize = (height) => {
    this.setState({
      height
    });
  }

  render() {
    const additionalTextInputProps = {
      onContentSizeChange: (e) => this.updateSize(e.nativeEvent.contentSize.height),
      style: {height: this.state.height},
    };
    return (
      <Chat>
        <Channel>
          <MessageInput
            additionalTextInputProps={additionalTextInputProps}
          />
        </Channel>
      </Chat>
    )
  }
}
```