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 />
</View>
);
}
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
* https://github.com/facebook/react-native
*
* Generated with the TypeScript template
* https://github.com/react-native-community/react-native-template-typescript
*
* @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}>
<NavigationContainer>
<Stack.Navigator headerMode="none" initialRouteName={'CometChatUI'}>
<Stack.Screen name="CometChatUI" component={CometChatUI} />
<Stack.Screen name="CometChatMessages" component={CometChatMessages} />
</Stack.Navigator>
</NavigationContainer>
</PersistGate>
</Provider>
);
};
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.
