GroupChat.tsx
unknown
tsx
a year ago
2.3 kB
6
Indexable
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, }, });
Editor is loading...
Leave a Comment