Migration guide

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

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

Minimum React-Native version change

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

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 { MMKV } from 'react-native-mmkv';
import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';

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

Disabling local caching

You can disable local caching if you don't want to use it.

import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';

const App = () => (
  <SendbirdProvider
    // ...
    sdkInitParams={{ localCacheEnabled: false }}
  />
)

UIKit configuration change

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

From v2	To 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

From v2	To 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

From v2	To v3
Message(colors.ui.message)	GroupChannelMessage(colors.ui.groupChannelMessage)

Module component changes

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

GroupChannelFragment

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

ChannelMessageList

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

From v2	To v3
onPressImageMessage	onPressMediaMessage
onLeaveScrollBottom	onScrolledAwayFromBottom
onPressAvatar	onShowUserProfile

ChannelInput

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

From v2	To v3
onSendFileMessage	onPressSendUserMessage
onSendUserMessage	onPressSendUserMessage
onUpdateFileMessage	onPressUpdateUserMessage
onUpdateUserMessage	onPressUpdateFileMessage

GroupChannelListFragment

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 v2	To v3
`(channel: SendbirdGroupChannel, onLongPressChannel: () => void) => React.ReactElement \\| null`	`(props: { channel: SendbirdGroupChannel; onPress: () => void; onLongPress: () => void; }) => React.ReactElement \\| null`

Hooks

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

From v2	To v3
nextMessages	newMessages
newMessagesFromMembers	newMessages

On this page

Breaking changes

Minimum React-Native version change Local cache requirement change UIKit configuration change String resource key change Theme name change Module component changes Hooks

Sample app