Chat Screen sometimes not open

Sendbird Voice/Video Calls React Native
1

We integrated SendBird Chat SDK in our React Native app

[last version of SendBird SDK UIKit for React Native]
[version of React Native is 0.73.4]

I initialize the SDK and connect it when the app start

  const sb = SB.init({
    appId: SendBirdAppID,
  });

  const updateUserInSendBird = async (id: string, nickname: string, profileUrl: string) => {
    await sb.connect(id);
    sb.updateCurrentUserInfo({ nickname, profileUrl });
  }

I call updateUserInSendBird in some place

The code is fine and the chat opens normally,
however sometimes I go through the app normally then return to the ChatScreen again

I get this screen

image
image1125×2436 53.7 KB

This same screen sometimes open and sometimes not open
Any behind reasons? limitation in SendBird or the server goes down?

2

Hello,

Welcome to the Sendbird community!

We would love to assist you, but we currently don’t have enough information to provide the help you need.

Could you please share more details on how you are integrating Sendbird? It would be helpful if you could describe the flow of your implemented code, the expected behavior, and how the actual behavior differs from your expectations. With this information, we will be better equipped to support you.

Thank you!

3

Thanks Airen,

here’s the whole screen code

import type { ApplicationStackParamList } from '@/types/navigation';
import { StackScreenProps } from '@react-navigation/stack';
import {
	createGroupChannelFragment,
	useSendbirdChat,
} from '@sendbird/uikit-react-native';
import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
import ChatBaseView from './Components/ChatBaseView';

type Props = StackScreenProps<ApplicationStackParamList, 'ChatV2'>;

function ChatV2({ route }: Props) {
	const { id, status } = route.params;
	const GroupChannelFragment = createGroupChannelFragment();

	const { sdk } = useSendbirdChat();
	const { channel } = useGroupChannel(sdk, `order-${id}`);

	if (!channel) {
		return null;
	}

	return (
		<ChatBaseView orderId={id} orderStatus={status} online>
			<GroupChannelFragment
				onPressHeaderRight={() => {}}
				onPressHeaderLeft={() => {}}
				onChannelDeleted={() => {}}
				channel={channel}
				renderNewMessagesButton={null}
			/>
		</ChatBaseView>
	);
}
export default ChatV2;

What I mention is the page render normally, but sometimes when I go and navigate in the app normally then return and open this same page again, it shows a blank screen which I shared in the post

4

@Ahmed_Mohsen Thank you for the update. Could you check if any errors are occurring by logging it?

const { channel, error } = useGroupChannel(sdk, `order-${id}`);
console.log('error:', error);