GroupChat.tsx

import React from 'react';
import { StyleSheet, View, ActivityIndicator } from 'react-native';
import { NavigationProp, ParamListBase } from '@react-navigation/native';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import {
  Chat,
  Channel,
  MessageList,
  MessageInput,
  KeyboardCompatibleView,
} from 'stream-chat-expo';
// import { chatClient } from '@shared/setupChatClient';
import User from '@models/User';
import Group from '@models/Group';
import HeaderShadow from './HeaderShadow';
import ScreenName from '@models/ScreenName';
import { StreamChatManager } from '@models/StreamChatManager';

interface GroupChatProps {
  user: User;
  group: Group;
  navigation: NavigationProp<ParamListBase>;
}

export default function GroupChat({
  user,
  group,
  navigation,
}: GroupChatProps): JSX.Element {
  const insets = useSafeAreaInsets();
  const chatClient = StreamChatManager.getInstance().client;
  const channel = chatClient.getChannelById('messaging', group.id, {});

  if (!chatClient.userID) {
    console.error('No chat client user ID');
  }

  if (!channel) {
    return (
      <View style={[styles.container, styles.loadingContainer]}>
        <ActivityIndicator style={styles.spinner} />
        <HeaderShadow />
      </View>
    );
  }

  return (
    <KeyboardCompatibleView
      style={styles.container}
      keyboardVerticalOffset={158}
    >
      <View style={{ marginBottom: insets.bottom }}>
        <Chat client={chatClient}>
          <Channel channel={channel} allowThreadMessagesInChannel={true}>
            <MessageList
              onThreadSelect={(message) => {
                navigation.navigate(ScreenName.GroupChatThreadScreen, {
                  group,
                  message,
                });
              }}
            />
            <MessageInput />
          </Channel>
        </Chat>
      </View>
      <HeaderShadow />
    </KeyboardCompatibleView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    overflow: 'hidden',
  },
  loadingContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    paddingBottom: '20%',
  },
  spinner: {
    marginBottom: 10,
  },
  loadingText: {
    opacity: 0.5,
  },
  text: {
    fontSize: 24,
    fontWeight: 'bold',
    opacity: 0.2,
  },
});