GroupChatThreadScreen.tsx

import { StyleSheet, View, LogBox } from 'react-native';
import { NativeStackScreenProps } from '@react-navigation/native-stack';
import _ from 'lodash';
import { Chat, Channel, Thread } from 'stream-chat-expo';
import ScreenName from '@models/ScreenName';
import { StackParamList } from '@models/StackParamList';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import HeaderShadow from '@components/HeaderShadow';
import { StreamChatManager } from '@models/StreamChatManager';

export default function GroupChatThreadScreen({
  route,
}: NativeStackScreenProps<
  StackParamList,
  ScreenName.GroupChatThreadScreen
>): JSX.Element | null {
  LogBox.ignoreLogs([
    'Non-serializable values were found in the navigation state',
  ]);

  const insets = useSafeAreaInsets();
  const { group, message } = route.params;
  const chatClient = StreamChatManager.getInstance().client;
  const channel = chatClient.getChannelById('messaging', String(group.id), {});

  return (
    <View style={styles.container}>
      <View style={{ marginBottom: insets.bottom }}>
        <Chat client={chatClient}>
          <Channel channel={channel} thread={message} threadList>
            <Thread />
          </Channel>
        </Chat>
      </View>
      <HeaderShadow />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  headerContainer: {
    backgroundColor: 'white',
  },
  headerTopContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  backButton: {
    position: 'relative',
    top: undefined,
    left: undefined,
  },
  headerInfoContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    flex: 1,
  },
  headerImage: {
    marginRight: 10,
  },
  headerTextContainer: {
    flex: 1,
    marginRight: 30,
  },
  name: {
    fontWeight: 'bold',
    fontSize: 14,
    color: '#333333',
  },
  infoText: {
    fontSize: 11,
    color: '#666666',
  },
  membersContentContainer: {
    paddingTop: 8,
    paddingBottom: 12,
    paddingHorizontal: 14,
  },
  chatContentContainer: {
    overflow: 'hidden',
    flex: 1,
  },
});