React Native 0.66.5

Sendbird Chat UIKit React Native
,
1

[Problem/Question]
// Detailed description of issue.

I am encountering an error when attempting to use the createNativeRecorderService function from the Sendbird UIKit for React Native. The error message I’m seeing is:

Error: Invariant Violation: new NativeEventEmitter() requires a non-null argument.

[UIKit Version]
// What version of the SDK are you using?

“@sendbird/chat”: “^4.12.3”,
“@sendbird/react-native-scrollview-enhancer”: “^0.2.1”,
“@sendbird/uikit-react-native”: “^3.5.1”,

React & React Native

“react”: “17.0.2”,
“react-native”: “0.66.5”,

[Reproduction Steps]
// Please provide reproduction steps and, if possible, code snippets.

  1. Import the necessary modules and functions from the Sendbird UIKit and other dependencies.
  2. Set up the required platform services including createNativeRecorderService.
  3. Attempt to use Sendbird functionality, such as opening the Sendbird UI.
  4. Encounter the error consistently.

Environment:

  • Node.js version: 16.20.2
    [Frequency]
    // How frequently is this issue occurring?

Additional Information:

  • The error occurs consistently whenever attempting to open the Sendbird UI.

[Current impact]
// How is this currently impacting your implementation?

This is my service file


import React from 'react';
import {
    createNativeClipboardService,
    createNativeFileService,
    createNativeMediaService,
    createNativeNotificationService,
    createNativePlayerService,
    createNativeRecorderService,
    SendbirdUIKitContainerProps
    cre
} from "@sendbird/uikit-react-native";

import { clipboard, Video, CreateThumbnail, FileAccess } from '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 { PERMISSIONS, Permission } from 'react-native-permissions';
// 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';


export const platformServices = {
    clipboard: createNativeClipboardService(clipboard),
    notification: createNativeNotificationService({
        messagingModule: RNFBMessaging,
        permissionModule: Permission,
    }),
    // file: createNativeFileService({
    //     imagePickerModule: ImagePicker,
    //     documentPickerModule: DocumentPicker,
    //     permissionModule: Permission,
    //     // fsModule: FileAccess,
    //     //mediaLibraryModule: CameraRoll,
    // }),
    media: createNativeMediaService({
        thumbnailModule: CreateThumbnail,
        imageResizerModule: ImageResizer,
    }),
    player: createNativePlayerService({
        audioRecorderModule: AudioRecorderPlayer,
        permissionModule: Permission,
    }),
    recorder: createNativeRecorderService({
        audioRecorderModule: AudioRecorderPlayer,
        permissionModule: Permission,
    }),
};

Sendbird continer

import React, { useEffect } from 'react';
import { Text } from 'react-native'
import { SendbirdUIKitContainer } from '@sendbird/uikit-react-native';
import RNFBMessaging from '@react-native-firebase/messaging';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { platformServices } from '../../services/sendBirdServices';
import { GroupChannelListScreen, GroupChannelCreateScreen, GroupChannelScreen } from '@components/sendbird/sendBirdNav';
import sendBirdSignIn from '@permissions/sendbird/sendBirdSignIn';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import {
    useSendbirdChat,
    createNativeNotificationService,
} from '@sendbird/uikit-react-native';
import { PermissionsContext } from '@contexts/PermissionsContext';

const RootStack = createNativeStackNavigator();

const Navigation = () => {

    const { currentUser } = useSendbirdChat();

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

const SendBird = () => {
    return (
        <SendbirdUIKitContainer
            appId={'B58A0EDB-3A7A-432E-BBBF-28BCC441089C'}
            chatOptions={{ localCacheStorage: AsyncStorage }}
            platformServices={platformServices}
        >
            <Navigation />
        </SendbirdUIKitContainer>
    );
};

export default SendBird;