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;
