Stream Chat React Native SDK

In v9, the property asyncMessagesMultiSendEnabled has been replaced by audioRecordingSendOnComplete.

Warning: The boolean semantics are inverted and the default behavior has changed.

Migration Rule

To preserve the v8 user experience (where recordings stayed in the composer by default), you must explicitly set: audioRecordingSendOnComplete={false}

This applies to the Channel component, MessageComposer component, and any direct calls to useMessageInputContext(). It also applies to direct uploadVoiceRecording(sendOnComplete) calls.

// To preserve v8 behavior (recordings stay in composer after upload):
<MessageComposer audioRecordingSendOnComplete={false} />

The TypeScriptMessaging example is a bare-minimum Chat application built using the Stream Chat SDK and the React Native CLI. To run this specific example, you must first set up your Native CLI development environment following the official React Native guide.

### Clone the project

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

Install dependencies

1. In the root install the dependencies:

yarn install

2. Move to the package directory and install the dependencies:

cd package && yarn install

3. Move to the native-package directory and install the dependencies:

cd native-package && yarn install

4. Finally, Move to the app directory and install the dependencies:

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

Install Pods for iOS

cd ios && pod install

Run

To run the application for different platforms, use the following commands:

yarn start

• For iOS

yarn ios

• For android

yarn android

Several core UI components have been renamed in v9. When migrating, replace the old component names with the new ones listed below:

• MessageSimple $\rightarrow$ MessageItemView
• MessageAvatar $\rightarrow$ MessageAuthor
• MessageInput $\rightarrow$ MessageComposer
• ChannelListMessenger $\rightarrow$ ChannelListView
• ChannelPreviewMessenger $\rightarrow$ ChannelPreviewView
• Card $\rightarrow$ UrlPreview (uses URLPreviewProps)
• GroupAvatar $\rightarrow$ AvatarGroup or AvatarStack
• CameraSelectorIcon, FileSelectorIcon, ImageSelectorIcon, and VideoRecorderSelectorIcon $\rightarrow$ AttachmentTypePickerButton

Note on AudioAttachment: The component name and ComponentOverrides key remain AudioAttachment. Only the internal source folder moved from Attachment/AudioAttachment/ to Attachment/Audio/. Do not rename imports or override keys.

// Example of component renames
// Old (v8)
<MessageSimple />
<MessageInput />

// New (v9)
<MessageItemView />
<MessageComposer />

Before editing your codebase, run these ripgrep commands to identify which parts of the migration guide apply to your project. Replace src/ with your actual source directory.

# Example: Detect if WithComponents migration is needed
rg '<(Channel|ChannelList|Chat|Thread)\s[^>]*\b([A-Z]\w+)=\{' src/

After performing the migration from v8 to v9, you must follow a strict verification workflow to ensure no legacy symbols remain and that the new architecture is correctly implemented.

1. Symbol Detection

Run the following rg (ripgrep) commands to ensure no v8-specific symbols are left in your src/ directory. If any return hits, they must be migrated or manually verified as legitimate (e.g., comments or test strings).

• Legacy Components: rg '\b(MessageSimple|MessageAvatar|ChannelPreviewMessenger|ChannelListMessenger)\b' src/
• Audio Controller: rg '\buseAudioController\b' src/
• Muted Users (Scope-split): rg '\buseMutedUsers\b' src/ (Note: Chat-level usage is a bug; ChannelList-level usage is fine).
• Multi-send: rg '\basyncMessagesMultiSendEnabled\b' src/
• Message/Preview Props: rg '\b(latestMessagePreview|deletedMessagesVisibilityType|messageContentWidth|setMessageContentWidth|legacyImageViewerSwipeBehaviour)\b' src/
• Attachment/Card Components: rg '\b(AttachmentActions|AttachmentUploadProgressIndicator|Card|CardCover|CardFooter|CardHeader|ImageReloadIndicator|MessagePreview)\b' src/
• Selector Icons: rg '\b(CameraSelectorIcon|FileSelectorIcon|ImageSelectorIcon|VideoRecorderSelectorIcon)\b' src/
• Theme/Surface Keys: rg '\b(backgroundCoreSurface|badgeTextInverse|textInverse|backgroundCoreElevation4)\b' src/

2. Component Override Check

Ensure component override props are no longer passed to Channel, ChannelList, Chat, or Thread. This regex should return 0 hits: rg '<(Channel|ChannelList|Chat|Thread)\s[^>]*\b([A-Z]\w+)=\{' src/

3. MessageInput Component Check

MessageInput has been renamed to MessageComposer. However, the context, hooks, and helper views were NOT renamed. Use this command to find remaining component references while ignoring valid context/hook names: rg '\bMessageInput\b' src/ | rg -v 'MessageInputContext|MessageInputHeaderView|MessageInputFooterView|MessageInputLeadingView|MessageInputTrailingView|useMessageInputContext|MessageInputContextValue'

4. Dependency and Type Check

• Peer Dependency: Verify "react-native-teleport" is present in package.json using rg '"react-native-teleport"' package.json.
• TypeScript: Run yarn tsc --noEmit or npx tsc --noEmit.
• Lint/Tests: Run yarn lint and yarn test if applicable.

5. Manual Smoke Test

Verify the following runtime behaviors:

• Render the hierarchy: <Chat> → <Channel> → <MessageList> + <MessageComposer>.
• Send a text message and long-press to confirm reactions/actions appear via the new overlay.
• Swipe a message right to confirm the reply preview appears (the entire MessageItemView row is now the hit area).
• Attach an image and confirm upload indicators render.
• Start an audio recording and confirm send behavior.
• Open the image gallery from a message with media.

Note on Theming: If components render incorrectly, check for stale theme keys by diffing against contexts/themeContext/utils/theme.ts.

# Example: Checking for legacy MessageInput component usage while ignoring valid context/hooks
rg '\bMessageInput\b' src/ | rg -v 'MessageInputContext|MessageInputHeaderView|MessageInputFooterView|MessageInputLeadingView|MessageInputTrailingView|useMessageInputContext|MessageInputContextValue'

This guide provides a machine-oriented migration reference for upgrading the stream-chat-react-native SDK from version 8 to version 9.

Key Migration Steps

1. Prerequisites: Ensure React Native New Architecture is enabled (RN 0.76+ or compatible Expo SDK) and install react-native-teleport (min version 0.5.4).
2. Structural Changes: Move component override props from Channel, ChannelList, Chat, and Thread into a new <WithComponents> wrapper.
3. Renames: Update several core component names (e.g., MessageSimple to MessageItemView).
4. Behavioral Changes: Note the inverted semantics for audio recording sending behavior.

Important Package Note

The actual SDK source is located in node_modules/stream-chat-react-native-core/src/. The packages stream-chat-react-native and stream-chat-expo are wrappers that depend on the core package.

# Example: Install required peer dependency
yarn add react-native-teleport