SendbirdUIKitContainer throws error on window.postMessage is not a function

Sendbird Desk
1

[Problem/Question]
When I use <SendbirdUIKitContainer appID=<>…/>, the mobile app throws window.postMessage is not a function.

// If problem, please fill out the below. If question, please delete.
“notifee/react-native”: “^5.4.1”,
“okta/okta-react-native”: “^2.5.0”,
“react-native-async-storage/async-storage”: “^1.15.17”,
“react-native-camera-roll/camera-roll”: “^5.4.0”,
“react-native-clipboard/clipboard”: “^1.8.5”,
“react-native-community/art”: “^1.2.0”,
“react-native-community/cli”: “^7.0.3”,
“react-native-community/cli-platform-android”: “^8.0.2”,
“react-native-community/geolocation”: “^2.1.0”,
“react-native-community/hooks”: “^2.8.1”,
“react-native-community/netinfo”: “^9.3.0”,
“react-native-community/picker”: “^1.8.1”,
“react-native-community/progress-view”: “^1.3.2”,
“react-native-community/push-notification-ios”: “^1.10.1”,
“react-native-firebase/app”: “^14.7.0”,
“react-native-firebase/messaging”: “^14.7.0”,
“eact-navigation/native”: “^6.0.11”,
“react-navigation/stack”: “^6.2.2”,
“segment/analytics-react-native”: “^2.7.2”,
“segment/sovran-react-native”: “^0.4.4”,
“sendbird/chat”: “^4.8.3”,
“sendbird/react-native-scrollview-enhancer”: “^0.2.0”,
“sendbird/uikit-react-native”: “^2.5.0”,
// What version of the SDK are you using?

[Reproduction Steps]
<SendbirdUIKitContainer
appId={SENDBIRD_APP_ID}
chatOptions={{
localCacheStorage: AsyncStorage,
// onInitialized: SetSendbirdSDK,
enableAutoPushTokenRegistration: true,
enableChannelListTypingIndicator: true,
enableChannelListMessageReceiptStatus: true,
enableUserMention: true,
enableMessageSearch: true,
enableUsingDefaultUserProfile: true,
}}
platformServices={{
file: ChatService.FileService,
notification: ChatService.NotificationService,
clipboard: ChatService.ClipboardService,
media: ChatService.MediaService,
}}
styles={{
defaultHeaderTitleAlign: ‘left’, //‘center’,
// theme: isLightTheme ? LightUIKitTheme : DarkUIKitTheme,
statusBarTranslucent: GetTranslucent(),
}}
// errorBoundary={{ErrorInfoComponent: ErrorInfoScreen}}
userProfile={{
onCreateChannel: (channel) => {
const params = {channelUrl: channel.url};

      if (channel.isGroupChannel()) {
        // navigationActions.push(Routes.GroupChannel, params);
      }

      if (channel.isOpenChannel()) {
        // navigationActions.push(Routes.OpenChannel, params);
      }
    },
  }}>

[Frequency]
every time

[Current impact]
blocking issue

2

I faced the same issue.

image
image1920×684 85.3 KB

History of commands:

image
image1920×243 64.2 KB

Please find the component that I have integrated in App.js

import React from 'react';
import {SendbirdUIKitContainer} from '@sendbird/uikit-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import {
  createNativeClipboardService,
  createNativeFileService,
  createNativeMediaService,
  createNativeNotificationService,
} from '@sendbird/uikit-react-native';

import Clipboard from '@react-native-clipboard/clipboard';
import {CameraRoll} from '@react-native-camera-roll/camera-roll';
import RNFBMessaging from '@react-native-firebase/messaging';
import Video from 'react-native-video';
import * as DocumentPicker from 'react-native-document-picker';
import * as FileAccess from 'react-native-file-access';
import * as ImagePicker from 'react-native-image-picker';
import * as Permissions from 'react-native-permissions';
import * as CreateThumbnail from 'react-native-create-thumbnail';
import * as ImageResizer from '@bam.tech/react-native-image-resizer';

import {NavigationContainer} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

import {useNavigation, useRoute} from '@react-navigation/native';
import {
  useSendbirdChat,
  createGroupChannelListFragment,
  createGroupChannelCreateFragment,
  createGroupChannelFragment,
} from '@sendbird/uikit-react-native';
import {useGroupChannel} from '@sendbird/uikit-chat-hooks';

import {Pressable, Text, View} from 'react-native';
import {useConnection} from '@sendbird/uikit-react-native';

const SignInScreen = () => {
  const {connect} = useConnection();

  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Pressable
        // eslint-disable-next-line react-native/no-inline-styles
        style={{
          width: 120,
          height: 30,
          backgroundColor: '#742DDD',
          alignItems: 'center',
          justifyContent: 'center',
        }}
        onPress={() => connect('USER_ID', {nickname: 'NICKNAME'})}>
        <Text>{'Sign in'}</Text>
      </Pressable>
    </View>
  );
};

const GroupChannelListFragment = createGroupChannelListFragment();
const GroupChannelCreateFragment = createGroupChannelCreateFragment();
const GroupChannelFragment = createGroupChannelFragment();

const GroupChannelListScreen = () => {
  const navigation = useNavigation();
  return (
    <GroupChannelListFragment
      onPressCreateChannel={(channelType) => {
        // Navigate to GroupChannelCreate function.
        navigation.navigate('GroupChannelCreate', {channelType});
      }}
      onPressChannel={(channel) => {
        // Navigate to GroupChannel function.
        navigation.navigate('GroupChannel', {channelUrl: channel.url});
      }}
    />
  );
};

const GroupChannelCreateScreen = () => {
  const navigation = useNavigation();

  return (
    <GroupChannelCreateFragment
      onCreateChannel={async (channel) => {
        // Navigate to GroupChannel function.
        navigation.replace('GroupChannel', {channelUrl: channel.url});
      }}
      onPressHeaderLeft={() => {
        // Go back to the previous screen.
        navigation.goBack();
      }}
    />
  );
};

const GroupChannelScreen = () => {
  const navigation = useNavigation();
  const {params} = useRoute();

  const {sdk} = useSendbirdChat();
  const {channel} = useGroupChannel(sdk, params.channelUrl);
  if (!channel) {
    return null;
  }

  return (
    <GroupChannelFragment
      channel={channel}
      onChannelDeleted={() => {
        // Navigate to GroupChannelList function.
        navigation.navigate('GroupChannelList');
      }}
      onPressHeaderLeft={() => {
        // Go back to the previous screen.
        navigation.goBack();
      }}
      onPressHeaderRight={() => {
        // Navigate to GroupChannelSettings function.
        navigation.navigate('GroupChannelSettings', {
          channelUrl: params.channelUrl,
        });
      }}
    />
  );
};

const ClipboardService = createNativeClipboardService(Clipboard);
const NotificationService = createNativeNotificationService({
  messagingModule: RNFBMessaging,
  permissionModule: Permissions,
});
const FileService = createNativeFileService({
  fsModule: FileAccess,
  permissionModule: Permissions,
  imagePickerModule: ImagePicker,
  mediaLibraryModule: CameraRoll,
  documentPickerModule: DocumentPicker,
});
const MediaService = createNativeMediaService({
  VideoComponent: Video,
  thumbnailModule: CreateThumbnail,
  imageResizerModule: ImageResizer,
});

const RootStack = createNativeStackNavigator();
const Navigation = () => {
  const {currentUser} = useSendbirdChat();

  return (
    <NavigationContainer>
      <RootStack.Navigator screenOptions={{headerShown: false}}>
        {!currentUser ? (
          <RootStack.Screen name={'SignIn'} component={SignInScreen} />
        ) : (
          <>
            <RootStack.Screen
              name={'GroupChannelList'}
              component={GroupChannelListScreen}
            />
            <RootStack.Screen
              name={'GroupChannelCreate'}
              component={GroupChannelCreateScreen}
            />
            <RootStack.Screen
              name={'GroupChannel'}
              component={GroupChannelScreen}
            />
          </>
        )}
      </RootStack.Navigator>
    </NavigationContainer>
  );
};

const Chat = () => {
  return (
    <SendbirdUIKitContainer
      appId={'app_id_removed_for_security'}
      chatOptions={{localCacheStorage: AsyncStorage}}
      platformServices={{
        file: FileService,
        notification: NotificationService,
        clipboard: ClipboardService,
        media: MediaService,
      }}>
      <Navigation />
    </SendbirdUIKitContainer>
  );
};

export default Chat;