I’m using the react chat SDK and am creating a new channel using a simple fetch call and the API request. I get a proper channel URL back and pass it to the Channel component of the UI Kit, but everytime I create and open the channel using the fetch call, the channel screen and all the sendbird components become weird. They lose their colour and become transparent. Everything is fixed when I reload the screen but this is not ideal when I create a channel. Please help. This is my code:
import React, { useEffect, useState } from “react”;
import Channel from “@sendbird/uikit-react/Channel”;
import { navigateBack } from “utils/helpers”;
import { GroupChannelInput } from “external/sendbird/components/group-channel-input.component”;
export const GroupChannelDetailScreen = ({ navigation, route }) => {
const [channelUrl, setChannelUrl] = useState(route?.params?.channelUrl);
useEffect(() => {
if (!channelUrl) {
// Don’t create channel if user does not exist on sendbird
const user_ids = route?.params?.user_ids;
fetch(
“https://APP_ID.sendbird.com/v3/group_channels”,
{
method: “POST”,
headers: {
“Content-Type”: “application/json; charset=utf8”,
“Api-Token”: “API_TOKEN”,
},
body: JSON.stringify({
user_ids: user_ids,
is_distinct: true,
}),
}
)
.then(async (resp) => {
if (resp.status === 200) {
const channel_url = (await resp.json())?.channel_url;
console.debug(🐓 Fetched or Created Group Channel ${channel_url});
setChannelUrl(channel_url);
navigation?.replace(“Messaging”, {
screen: “GroupChannelDetail”,
params: { channelUrl: channel_url },
});
}
})
.catch((error) => console.error(❌ Sendbird Error: ${error}));
}
}, );
return (
<Channel
channelUrl={channelUrl}
onBackClick={() => {
navigation.navigate(“Messaging”, {
screen: “GroupChannelList”,
});
}}
onChatHeaderActionClick={() =>
navigation.navigate(“Messaging”, {
screen: “GroupChannelEdit”,
params: { channelUrl: channelUrl },
})
}
renderMessageInput={() => }
/>
);
};
