I have an error whenever i try to open a channel that has messages from an other user that isn't me. I'm able to open the channel succesfully whenever there is no message send before or, if there are only messages by myself. So whenever opening a channel in the state described i get this error:
ERROR TypeError: undefined is not a function
This error is located at:
in Avatar{avatar} (created by MessageAvatarWithContext)
in RCTView (created by View)
in View (created by MessageAvatarWithContext)
in MessageAvatarWithContext
in MessageAvatar{messageSimple{avatarWrapper}} (created by MessageSimpleWithContext)
in RCTView (created by View)
in View (created by MessageSimpleWithContext)
in MessageSimpleWithContext
in MessageSimple{messageSimple{container}} (created by MessageWithContext)
in MessageProvider (created by MessageWithContext)
in RCTView (created by View)
in View (created by MessageWithContext)
in RCTView (created by View)
in View (created by MessageWithContext)
in RCTView (created by View)
in View (created by MessageWithContext)
in MessageWithContext
in Message (created by CellRenderer)
in RCTView (created by View)
in View (created by CellRenderer)
in RCTView (created by View)
in View (created by InvertedCellRendererComponent)
in InvertedCellRendererComponent (created by CellRenderer)
in VirtualizedListCellContextProvider (created by CellRenderer)
in CellRenderer (created by VirtualizedList)
in RCTView (created by View)
in View (created by ScrollView)
in RCTScrollView (created by ScrollView)
in ScrollView (created by ScrollView)
in ScrollView (created by VirtualizedList)
in VirtualizedListContextProvider (created by VirtualizedList)
in VirtualizedList (created by FlatList)
in FlatList (created by MessageListWithContext)
in RCTView (created by View)
in View (created by MessageListWithContext)
in MessageListWithContext (created by MessageList)
in MessageList (created by ChannelScreen)
in RCTView (created by View)
in View (created by ChannelWithContext)
in MessageInputProvider (created by ChannelWithContext)
in SuggestionsProvider (created by ChannelWithContext)
in ThreadProvider (created by ChannelWithContext)
in MessagesProvider (created by ChannelWithContext)
in PaginatedMessageListProvider (created by ChannelWithContext)
in TypingProvider (created by ChannelWithContext)
in OwnCapabilitiesProvider (created by ChannelWithContext)
in ChannelProvider (created by ChannelWithContext)
in RCTView (created by View)
in View (created by KeyboardCompatibleView)
in RCTView (created by View)
in View (created by KeyboardCompatibleView)
in KeyboardProvider (created by KeyboardCompatibleView)
in KeyboardCompatibleView (created by ChannelWithContext)
in ChannelWithContext (created by Channel)
in Channel (created by ChannelScreen)
in ChannelScreen (created by SceneView)
in StaticContainer
in EnsureSingleNavigator (created by SceneView)
in SceneView (created by BottomTabView)
in RCTView (created by View)
in View (created by Screen)
in RCTView (created by View)
in View (created by Background)
in Background (created by Screen)
in Screen (created by BottomTabView)
in RNSScreen (created by AnimatedComponent)
in AnimatedComponent
in AnimatedComponentWrapper (created by InnerScreen)
in Suspender (created by Freeze)
in Suspense (created by Freeze)
in Freeze (created by DelayedFreeze)
in DelayedFreeze (created by InnerScreen)
in InnerScreen (created by Screen)
in Screen (created by MaybeScreen)
in MaybeScreen (created by BottomTabView)
in RNSScreenContainer (created by ScreenContainer)
in ScreenContainer (created by MaybeScreenContainer)
in MaybeScreenContainer (created by BottomTabView)
in RNCSafeAreaProvider (created by SafeAreaProvider)
in SafeAreaProvider (created by SafeAreaInsetsContext)
in SafeAreaProviderCompat (created by BottomTabView)
in BottomTabView (created by BottomTabNavigator)
in PreventRemoveProvider (created by NavigationContent)
in NavigationContent
in Unknown (created by BottomTabNavigator)
in BottomTabNavigator (created by HomeNavigator)
in RCTView (created by View)
in View (created by HomeNavigator)
in HomeNavigator (created by AppNavContainer)
in EnsureSingleNavigator
in BaseNavigationContainer
in ThemeProvider
in NavigationContainerInner (created by AppNavContainer)
in AppNavContainer (created by App)
in ActiveChannelsProvider (created by ChannelsStateProvider)
in ChannelsStateProvider (created by ChatWithContext)
in ThemeProvider (created by ChatWithContext)
in TranslationProvider (created by ChatWithContext)
in ChatProvider (created by ChatWithContext)
in ChatWithContext (created by Chat)
in Chat (created by App)
in ImageGalleryProvider (created by OverlayProvider)
in AttachmentPickerProvider (created by OverlayProvider)
in MessageOverlayProvider (created by OverlayProvider)
in TranslationProvider (created by OverlayProvider)
in OverlayProvider (created by App)
in RNGestureHandlerRootView (created by GestureHandlerRootView)
in GestureHandlerRootView (created by App)
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
i have this code in my channelscreen which is almost directly copied from another person:
import { View, Text, StyleSheet } from "react-native";
import React, { useEffect, useState } from "react";
import { useRoute, useNavigation } from "@react-navigation/native";
import {
Channel,
MessageList,
MessageInput,
useChatContext,
} from "stream-chat-expo";
import { LogBox } from "react-native";
import Colors from "../../config/colors";
LogBox.ignoreLogs([
"Non-serializable values were found in the navigation state",
]);
const ChannelScreen = () => {
const [channel, setChannel] = useState(null);
const route = useRoute();
const { client } = useChatContext();
const { channelId } = route.params || {};
useEffect(() => {
const fetchChannel = async () => {
setChannel(null);
console.log("fetching channel", channelId);
const channels = await client.queryChannels({ id: { $eq: channelId } });
if (channels.length > 0) {
console.log("updating channel state");
setChannel(channels[0]);
} else {
console.log("No channels found");
}
};
fetchChannel();
}, [channelId]);
console.log("ChannelScreen rendered with channel:", channel);
if (!channel) {
return (
<View style={styles.errorContainer}>
<Text style={styles.errorText}>Select a channel from the list!</Text>
</View>
);
}
return (
<Channel channel={channel}>
<MessageList />
<MessageInput />
</Channel>
);
};
const styles = StyleSheet.create({
errorContainer: {
flex: 1,
justifyContent: "center",
alignItems: "center",
padding: 10,
},
errorText: {
color: "white",
fontSize: 16,
},
container: {
flex: 1,
backgroundColor: "#fff",
},
header: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
paddingHorizontal: 10,
height: 60,
borderBottomWidth: 1,
borderBottomColor: "#ddd",
},
title: {
fontWeight: "bold",
fontSize: 20,
},
});
export default ChannelScreen;
this are the versions i'm using: "stream-chat-expo": "^5.14.0" "stream-chat": "^8.6.0", "react-native": "0.71.7", "react": "18.2.0", "expo": "~48.0.5",
I tried updating all dependencies to the latest with no result. I didn't find any threads on this exept for one but that's related to Redux with Streamchat, so that didn't fit my case. I'm out of ideas for this one, and this thesis have to be finished end of May, i would really appreciate if you could put me at the right track or give me info why this error exists. Also a sidenote: when opening a channel i get a warning that non-serializable values were found in the navigation state, maybe this have anything to do with the error?
even when trying to use the template i get the same error:
import { View, TouchableOpacity, Text } from "react-native";
import { Channel as ChannelType, StreamChat } from "stream-chat";
import {
Channel,
ChannelList,
Chat,
MessageInput,
MessageList,
OverlayProvider,
Thread,
} from "stream-chat-react-native";
const client = StreamChat.getInstance("ngdaaxg4xenm");
export const App = () => {
const [channel, setChannel] = useState(null);
const [clientReady, setClientReady] = useState(false);
const [thread, setThread] = useState(null);
useEffect(() => {
const setupClient = async () => {
try {
await client.connectUser(
{
id: "M5",
name: "Jim Lahey",
image: "https://i.imgur.com/fR9Jz14.png",
},
"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyX2lkIjoiTTUifQ.0u46-Hb9Sumq6-D6-imWXhTqbRehprf7xjWdA19c1HM"
);
setClientReady(true);
} catch (e) {
console.log(e);
}
};
setupClient();
}, []);
const onBackPress = () => {
if (thread) {
setThread(null);
} else if (channel) {
setChannel(null);
}
};
if (!clientReady) return null;
return (
<OverlayProvider topInset={60}>
<TouchableOpacity onPress={onBackPress} disabled={!channel}>
<View style={{ height: 60, paddingLeft: 16, paddingTop: 40 }}>
{channel && <Text>Back</Text>}
</View>
</TouchableOpacity>
<View style={{ flex: 1 }}>
<Chat client={client}>
{channel ? (
<Channel
channel={channel}
keyboardVerticalOffset={60}
thread={thread}
threadList={!!thread}
>
{thread ? (
<Thread />
) : (
<>
<MessageList onThreadSelect={setThread} />
<MessageInput />
</>
)}
</Channel>
) : (
<ChannelList onSelect={setChannel} />
)}
</Chat>
</View>
</OverlayProvider>
);
};
export default App;
