-
Notifications
You must be signed in to change notification settings - Fork 40
/
GroupChannelScreen.tsx
118 lines (110 loc) · 3.59 KB
/
GroupChannelScreen.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
import React from 'react';
import { useGroupChannel } from '@sendbird/uikit-chat-hooks';
import { createGroupChannelFragment, useSendbirdChat } from '@sendbird/uikit-react-native';
import { useAppNavigation } from '../../../hooks/useAppNavigation';
import { Routes } from '../../../libs/navigation';
/**
* Example for customize navigation header with DomainContext
* Component should return null for hide uikit header
*
* Especially in GroupChannel (chatting view)
* you should provide your custom header height to GroupChannel as a keyboardAvoidOffset prop
* to fix Input component position properly (when focused)
*
* @example
* ```
* import React, { useContext, useEffect } from 'react';
* import { Pressable } from 'react-native';
*
* import { useNavigation } from "@react-navigation/native";
* import { useHeaderHeight } from '@react-navigation/elements';
*
* import { GroupChannelContexts, GroupChannelModule } from '@sendbird/uikit-react-native';
* import { Icon } from '@sendbird/uikit-react-native-foundation';
*
* const UseReactNavigationHeader: GroupChannelModule['Header'] = ({ onPressHeaderRight, onPressHeaderLeft }) => {
* const navigation = useNavigation();
* const { headerTitle } = useContext(GroupChannelContexts.Fragment);
* useEffect(() => {
* navigation.setOptions({
* headerShown: true,
* headerTitleAlign: 'center',
* title: headerTitle,
* headerLeft: () => (
* <Pressable onPress={onPressHeaderLeft}>
* <Icon icon={'arrow-left'} />
* </Pressable>
* ),
* headerRight: () => (
* <Pressable onPress={onPressHeaderRight}>
* <Icon icon={'info'} />
* </Pressable>
* ),
* });
* }, []);
* return null;
* };
*
* const GroupChannelFragment = createGroupChannelFragment({ Header: UseReactNavigationHeader });
*
* const GroupChannelScreen = () => {
* // ...
* const height = useHeaderHeight();
*
* return (
* <GroupChannelFragment
* keyboardAvoidOffset={height}
* // ...
* />
* )
* }
*
* ```
* */
const GroupChannelFragment = createGroupChannelFragment();
const GroupChannelScreen = () => {
const { navigation, params } = useAppNavigation<Routes.GroupChannel>();
const { sdk } = useSendbirdChat();
const { channel } = useGroupChannel(sdk, params.channelUrl);
if (!channel) return null;
return (
<GroupChannelFragment
channel={channel}
searchItem={params.searchItem}
onPressMediaMessage={(fileMessage, deleteMessage) => {
// Navigate to media viewer
navigation.navigate(Routes.FileViewer, {
serializedFileMessage: fileMessage.serialize(),
deleteMessage,
});
}}
onChannelDeleted={() => {
// Should leave channel, navigate to channel list
navigation.navigate(Routes.GroupChannelList);
}}
onPressHeaderLeft={() => {
// Navigate back
navigation.goBack();
}}
onPressHeaderRight={() => {
// Navigate to group channel settings
navigation.push(Routes.GroupChannelSettings, params);
}}
onPressReplyMessageInThread={(message, startingPoint) => {
// Navigate to thread
if (message) {
navigation.push(Routes.GroupChannelThread, {
channelUrl: params.channelUrl,
serializedMessage: message.serialize(),
startingPoint: startingPoint,
});
}
}}
// messageListQueryParams={{
// prevResultLimit: 20,
// customTypesFilter: ['filter'],
// }}
/>
);
};
export default GroupChannelScreen;