Chat UIKit React Native v3
Chat UIKit React Native
Chat UIKit
React Native
Version 3

Migration guide

Copy link

UIKit v3 for React Native is now available. When migrating from v2 to v3, there are several breaking changes to be mindful of. Refer to the breaking changes below in each key function.


Breaking changes

Copy link

The following breaking changes have been made to UIKit v3 for React Native.

Minimum React-Native version change

Copy link

The minimum version of React-Native has been changed from 0.63.3 to 0.65.0 to provide stable functionality. Refer to the React Native version upgrade guide.

  • Supports stable Metro bundler version.
  • Supports stable React-Native APIs, such as EventSubscription.
  • Minimum iOS version for deployment changed to v11.0.
  • Increased minimum Gradle version to provide stable operation.

Local cache requirement change

Copy link

Local caching is now required to use in UIKit for React Native. You must add localCacheStorage to SendbirdUIKitContainer. To learn more, refer to this page.

import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';

const App = () => {
    return <SendbirdUIKitContainer chatOptions={{ localCacheStorage: AsyncStorage }} />;
}

UIKit configuration change

Copy link

The feature configuration options that were previously provided in chatOptions prop of SendbirdUIKitContainer have moved to the uikitOptions prop.

From v2To v3

chatOptions.enableUserMention

uikitOptions.groupChannel.enableMention

chatOptions.enableGroupChannelOGTag

uikitOptions.groupChannel.enableOgtag

chatOptions.enableChannelListTypingIndicator

uikitOptions.groupChannelList.enableTypingIndicator

chatOptions.enableChannelListMessageReceiptStatus

uikitOptions.groupChannelList.enableMessageReceiptStatus

chatOptions.enableMessageSearch

uikitOptions.groupChannelSettings.enableMessageSearch

chatOptions.enableOpenChannelOGTag

uikitOptions.openChannel.enableOgtag

chatOptions.enableUsingDefaultUserProfile

uikitOptions.common.enableUsingDefaultUserProfile

String resource key change

Copy link
From v2To v3

OPEN_CHANNEL.LIST_BANNER_FROZEN

LABELS.CHANNEL_MESSAGE_LIST_FROZEN

GROUP_CHANNEL.LIST_BANNER_FROZEN

LABELS.CHANNEL_MESSAGE_LIST_FROZEN

GROUP_CHANNEL.DIALOG_MESSAGE_COPY

LABELS.CHANNEL_MESSAGE_COPY

GROUP_CHANNEL.DIALOG_MESSAGE_EDIT

LABELS.CHANNEL_MESSAGE_EDIT

GROUP_CHANNEL.DIALOG_MESSAGE_SAVE

LABELS.CHANNEL_MESSAGE_SAVE

GROUP_CHANNEL.DIALOG_MESSAGE_DELETE

LABELS.CHANNEL_MESSAGE_DELETE

GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_TITLE

LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_TITLE

GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_OK

LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_OK

GROUP_CHANNEL.DIALOG_MESSAGE_DELETE_CONFIRM_CANCEL

LABELS.CHANNEL_MESSAGE_DELETE_CONFIRM_CANCEL

GROUP_CHANNEL.DIALOG_MESSAGE_FAILED_RETRY

LABELS.CHANNEL_MESSAGE_FAILED_RETRY

GROUP_CHANNEL.DIALOG_MESSAGE_FAILED_REMOVE

LABELS.CHANNEL_MESSAGE_FAILED_REMOVE

GROUP_CHANNEL.DIALOG_ATTACHMENT_CAMERA(LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA)

LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_PHOTO and LABELS.CHANNEL_INPUT_ATTACHMENT_CAMERA_VIDEO

GROUP_CHANNEL.DIALOG_ATTACHMENT_PHOTO_LIBRARY

LABELS.CHANNEL_INPUT_ATTACHMENT_PHOTO_LIBRARY

GROUP_CHANNEL.DIALOG_ATTACHMENT_FILES

LABELS.CHANNEL_INPUT_ATTACHMENT_FILES

GROUP_CHANNEL.INPUT_PLACEHOLDER_ACTIVE

LABELS.CHANNEL_INPUT_PLACEHOLDER_ACTIVE

GROUP_CHANNEL.INPUT_PLACEHOLDER_DISABLED

LABELS.CHANNEL_INPUT_PLACEHOLDER_DISABLED

GROUP_CHANNEL.INPUT_PLACEHOLDER_MUTED

LABELS.CHANNEL_INPUT_PLACEHOLDER_MUTED

GROUP_CHANNEL.INPUT_EDIT_OK

LABELS.CHANNEL_INPUT_EDIT_OK

GROUP_CHANNEL.INPUT_EDIT_CANCEL

LABELS.CHANNEL_INPUT_EDIT_CANCEL

GROUP_CHANNEL_MEMBERS.USER_BAR_ME_POSTFIX

LABELS.USER_BAR_ME_POSTFIX

GROUP_CHANNEL_MEMBERS.USER_BAR_OPERATOR

LABELS.USER_BAR_OPERATOR

Theme name change

Copy link
From v2To v3

Message(colors.ui.message)

GroupChannelMessage(colors.ui.groupChannelMessage)

Module component changes

Copy link

Refer to the following module components to see what changes have been made in UIKit v3.

GroupChannelFragment

Copy link

The queryCreator prop in GroupChannelProps has been removed in UIKit v3 to specify local caching as required.

ChannelMessageList

Copy link

The name of the following properties in GroupChannelProps and OpenChannelProps have changed in UIKit v3.

From v2To v3

onPressImageMessage

onPressMediaMessage

onLeaveScrollBottom

onScrolledAwayFromBottom

onPressAvatar

onShowUserProfile

ChannelInput

Copy link

The name of the following properties in GroupChannelProps and OpenChannelProps have changed in UIKit v3.

From v2To v3

onSendFileMessage

onPressSendUserMessage

onSendUserMessage

onPressSendUserMessage

onUpdateFileMessage

onPressUpdateUserMessage

onUpdateUserMessage

onPressUpdateFileMessage

GroupChannelListFragment

Copy link

The queryCreator prop in GroupChannelListProps has been removed in UIKit v3 to specify local caching as required. The renderGroupChannelPreview property in GroupChannelListFragment has also changed as shown in the table below.

From v2To v3

(channel: SendbirdGroupChannel, onLongPressChannel: () => void) => React.ReactElement \| null

(props: { channel: SendbirdGroupChannel; onPress: () => void; onLongPress: () => void; }) => React.ReactElement \| null

The name of the following properties in useGroupChannelMessages and useOpenChannelMessages have changed in UIKit v3.

From v2To v3

nextMessages

newMessages

newMessagesFromMembers

newMessages