CallingComponent crashes on accept call

Hi there,

I integrated the CometChat UI Kit for our react native application.
Everything seems to work okay, except for when I make a call.

If I comment out the <CometChat.CallingComponent callsettings={this.state.callSettings} />, in the UI Kit the call is accepted and nothing appends as expected, although as soon as I uncomment this line the app crashes with :

I tried all these to no avail : React Native error message: Trying to add a root view with an explicit id already set - Stack Overflow

There seems to be something in the component that conflicts with our app but I have no idea what.

So I created a react native app from scratch, because I couldnt get your kit to work in the one I already have.

Conclusion is the same, the CometChat UI does not work as is, following your documentation is not enough. Your UI Kit needs at least a stack navigator, and the CometChatMessages component registered in the navigator, otherwise opening a conversation leads to a crash.

In other words this will not work :

import React from 'react';
import { View } from 'react-native';
import { CometChatUI } from '../cometchat-pro-react-native-ui-kit';

export default function CometChatUIView() {
  return (
    <View style={{ flex: 1 }}>
      <CometChatUI />

Besides, after setting up all of this correctly, I still get the issue discussed above even after starting a new react native project.

Here’s my App.tsx :

 * Sample React Native App
 * Generated with the TypeScript template
 * @format

import React from 'react';
import { Provider } from 'react-redux';
import { CometChat } from '@cometchat-pro/react-native-chat';
import { CometChatMessages, CometChatUI } from './cometchat-pro-react-native-ui-kit/src';
import { NavigationContainer } from '@react-navigation/native';
import { store, persistor } from './store/store';
import { PersistGate } from 'redux-persist/integration/react';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const appID = '1938373793f4051b';
const region = 'eu';
const appSetting = new CometChat.AppSettingsBuilder().subscribePresenceForAllUsers().setRegion(region).build();

const App = () => {
  CometChat.init(appID, appSetting).then(
    () => {
      console.log('Initialization completed successfully');
      CometChat.login('a5b829e0-11b0-49cf-b6db-70bd3e5296e2', 'b3e49c0f295ff67a6e69531a5dfac23e5d32ebc5').then(
        (user) => {
          console.log('Login Successful:', { user });
        (error) => {
          console.log('Login failed with exception:', { error });
    (error) => {
      console.log('Initialization failed with error:', error);
      // Check the reason for error and take appropriate action.

  return (
    <Provider store={store}>
      <PersistGate loading={null} persistor={persistor}>
          <Stack.Navigator headerMode="none" initialRouteName={'CometChatUI'}>
            <Stack.Screen name="CometChatUI" component={CometChatUI} />
            <Stack.Screen name="CometChatMessages" component={CometChatMessages} />

export default App;

Can you please try creating a new react native app (if possible in typescript), and try following your doc ? It seems to only be working in your sample app. Although I can’t build our app around yours.

I believe you only tested the Kit from within the sample project.

Finally, we should be able to install the UI Kit like any other react native component through npm i or yarn install, the current process is the worst.

Hey @AidenPearce,
We where having some conflict with the latest version of react native and that the reason you were facing this issue. We have release a beta version of our calling Component that is @cometchat-pro/react-native-calls@2.1.2-beta1 which contains a fix for this. So using this version should solve you issue.


Alright thanks Tirath !

I ended up building our app around yours, which is far from ideal but it worked :slight_smile:

1 Like

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.