11import React , { useCallback , useEffect , useState } from 'react' ;
2- import type { Channel as StreamChatChannel } from 'stream-chat' ;
2+ import type {
3+ LocalMessage ,
4+ Channel as StreamChatChannel ,
5+ TextComposerMiddleware ,
6+ } from 'stream-chat' ;
37import { RouteProp , useFocusEffect , useNavigation } from '@react-navigation/native' ;
48import {
59 Channel ,
@@ -13,6 +17,7 @@ import {
1317 useTheme ,
1418 useTypingString ,
1519 AITypingIndicatorView ,
20+ createTextComposerEmojiMiddleware ,
1621} from 'stream-chat-react-native' ;
1722import { Platform , StyleSheet , View } from 'react-native' ;
1823import type { StackNavigationProp } from '@react-navigation/stack' ;
@@ -25,10 +30,10 @@ import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
2530
2631import type { StackNavigatorParamList } from '../types' ;
2732import { NetworkDownIndicator } from '../components/NetworkDownIndicator' ;
33+ import { init , SearchIndex } from 'emoji-mart' ;
34+ import data from '@emoji-mart/data' ;
2835
29- const styles = StyleSheet . create ( {
30- flex : { flex : 1 } ,
31- } ) ;
36+ init ( { data } ) ;
3237
3338export type ChannelScreenNavigationProp = StackNavigationProp <
3439 StackNavigatorParamList ,
@@ -115,12 +120,9 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
115120 } ,
116121 } = useTheme ( ) ;
117122
118- const [ channel , setChannel ] = useState < StreamChatChannel | undefined > (
119- channelFromProp ,
120- ) ;
123+ const [ channel , setChannel ] = useState < StreamChatChannel | undefined > ( channelFromProp ) ;
121124
122- const [ selectedThread , setSelectedThread ] =
123- useState < ThreadContextValue [ 'thread' ] > ( ) ;
125+ const [ selectedThread , setSelectedThread ] = useState < ThreadContextValue [ 'thread' ] > ( ) ;
124126
125127 useEffect ( ( ) => {
126128 const initChannel = async ( ) => {
@@ -146,13 +148,30 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
146148 setSelectedThread ( undefined ) ;
147149 } ) ;
148150
149- const onThreadSelect = useCallback ( ( thread ) => {
150- setSelectedThread ( thread ) ;
151- navigation . navigate ( 'ThreadScreen' , {
152- channel,
153- thread,
151+ useEffect ( ( ) => {
152+ if ( ! chatClient ) {
153+ return ;
154+ }
155+
156+ chatClient . setMessageComposerSetupFunction ( ( { composer } ) => {
157+ composer . textComposer . middlewareExecutor . insert ( {
158+ middleware : [ createTextComposerEmojiMiddleware ( SearchIndex ) as TextComposerMiddleware ] ,
159+ position : { after : 'stream-io/text-composer/mentions-middleware' } ,
160+ unique : true ,
161+ } ) ;
154162 } ) ;
155- } , [ channel , navigation ] ) ;
163+ } , [ chatClient ] ) ;
164+
165+ const onThreadSelect = useCallback (
166+ ( thread : LocalMessage | null ) => {
167+ setSelectedThread ( thread ) ;
168+ navigation . navigate ( 'ThreadScreen' , {
169+ channel,
170+ thread,
171+ } ) ;
172+ } ,
173+ [ channel , navigation ] ,
174+ ) ;
156175
157176 if ( ! channel || ! chatClient ) {
158177 return null ;
@@ -172,12 +191,14 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
172191 thread = { selectedThread }
173192 >
174193 < ChannelHeader channel = { channel } />
175- < MessageList
176- onThreadSelect = { onThreadSelect }
177- />
194+ < MessageList onThreadSelect = { onThreadSelect } />
178195 < AITypingIndicatorView channel = { channel } />
179196 < MessageInput />
180197 </ Channel >
181198 </ View >
182199 ) ;
183200} ;
201+
202+ const styles = StyleSheet . create ( {
203+ flex : { flex : 1 } ,
204+ } ) ;
0 commit comments