SendbirdUIKitContainer doenst work out of the box (SB UI KIT react native)

,
1

Hello SB team,

Im trying to POC the SB UI KIT with react native.
Unfortunately im not even able to test it, cause it seems to have a problem with the actual component of

I installed the packages, as requested in the docs:
“react”: “18.2.0”,
“react-native”: “0.72.9”,
“@sendbird/uikit-react-native”: “3.4.3”,
“react-native-audio-recorder-player”: “^3.6.6”,
“react-native-create-thumbnail”: “^2.0.0”,
“react-native-document-picker”: “^9.1.1”,
“react-native-file-access”: “^3.0.6”,
“@react-native-camera-roll/camera-roll”: “^7.5.0”,
“@react-native-clipboard/clipboard”: “^1.13.2”,
“@bam.tech/react-native-image-resizer”: “^3.0.7”,

The Error I get:
TypeError: Cannot read property ‘IOS’ of undefined

This error is located at:
in SendbirdUIKitContainer (created by ChatStack)
in ChatStack (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by SceneView)
in RCTView (created by View)
in View (created by DebugContainer)
…
**** i dont have any .IOS or [‘ios’] in my code, so its def something internal to the UI KIT*

Code:

import React, { FC } from 'react';
import {
  SendbirdUIKitContainer,
  createNativeClipboardService,
  createNativeFileService,
  createNativeMediaService,
  createNativeNotificationService,
  createNativePlayerService,
  createNativeRecorderService,
} from '@sendbird/uikit-react-native';
import AsyncStorage from '@react-native-async-storage/async-storage';
import * as ImagePicker from 'react-native-image-picker';
import * as Permissions from 'react-native-permissions';
import RNFBMessaging from '@react-native-firebase/messaging';
import Video from 'react-native-video';
import Clipboard from '@react-native-clipboard/clipboard';
import { CameraRoll } from '@react-native-camera-roll/camera-roll';
import * as DocumentPicker from 'react-native-document-picker';
import * as FileAccess from 'react-native-file-access';
import * as CreateThumbnail from 'react-native-create-thumbnail';
import * as ImageResizer from '@bam.tech/react-native-image-resizer';
import * as AudioRecorderPlayer from 'react-native-audio-recorder-player';

const APP_ID = 'THE_APP_ID_FROM_SB_DASHBOARD'; // been hidden for publication purposes.

const ChatStack: FC<any> = ({ route }) => {
  const nativePlatformServices = {
    clipboard: createNativeClipboardService(Clipboard),
    notification: createNativeNotificationService({
      messagingModule: RNFBMessaging,
      permissionModule: Permissions,
    }),
    file: createNativeFileService({
      imagePickerModule: ImagePicker,
      documentPickerModule: DocumentPicker,
      permissionModule: Permissions,
      fsModule: FileAccess,
      mediaLibraryModule: CameraRoll,
    }),
    media: createNativeMediaService({
      VideoComponent: Video,
      thumbnailModule: CreateThumbnail,
      imageResizerModule: ImageResizer,
    }),
    player: createNativePlayerService({
      audioRecorderModule: AudioRecorderPlayer,
      permissionModule: Permissions,
    }),
    recorder: createNativeRecorderService({
      audioRecorderModule: AudioRecorderPlayer,
      permissionModule: Permissions,
    }),
  };
  return (
    <SendbirdUIKitContainer
      appId={APP_ID}
      platformServices={nativePlatformServices}
      chatOptions={{
        localCacheStorage: AsyncStorage,
      }}></SendbirdUIKitContainer>
  );
};

export default ChatStack;

Screenshot 2024-03-25 at 11.59.36
Screenshot 2024-03-25 at 11.59.36420×654 58.9 KB

2

Hello @Dev1, have you installed the @sendbird/chat package?

Here is the list of required dependencies: https://sendbird.com/docs/chat/uikit/v3/react-native/introduction/send-first-message#2-get-started-3-step-2-install-uikit-and-the-required-dependencies