fix: application of global config in sample app

Author: khushal87

examples/SampleApp/App.tsx

@@ -6,10 +6,10 @@ import { createStackNavigator } from '@react-navigation/stack';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import {
   Chat,
+  createTextComposerEmojiMiddleware,
   OverlayProvider,
   SqliteClient,
   ThemeProvider,
-  useChatContext,
   useOverlayContext,
 } from 'stream-chat-react-native';
 import { getMessaging } from '@react-native-firebase/messaging';
@@ -35,8 +35,12 @@ import { OneOnOneChannelDetailScreen } from './src/screens/OneOnOneChannelDetail
 import { SharedGroupsScreen } from './src/screens/SharedGroupsScreen';
 import { ThreadScreen } from './src/screens/ThreadScreen';
 import { UserSelectorScreen } from './src/screens/UserSelectorScreen';
+import { init, SearchIndex } from 'emoji-mart';
+import data from '@emoji-mart/data';
 
-import type { LocalMessage, StreamChat } from 'stream-chat';
+import type { LocalMessage, StreamChat, TextComposerMiddleware } from 'stream-chat';
+
+init({ data });
 
 if (__DEV__) {
   DevSettings.addMenuItem('Reset local DB (offline storage)', () => {
@@ -119,6 +123,25 @@ const App = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!chatClient) {
+      return;
+    }
+    chatClient.setMessageComposerSetupFunction(({ composer }) => {
+      composer.updateConfig({
+        drafts: {
+          enabled: true,
+        },
+      });
+
+      composer.textComposer.middlewareExecutor.insert({
+        middleware: [createTextComposerEmojiMiddleware(SearchIndex) as TextComposerMiddleware],
+        position: { after: 'stream-io/text-composer/mentions-middleware' },
+        unique: true,
+      });
+    });
+  }, [chatClient]);
+
   return (
     <SafeAreaProvider
       style={{
@@ -212,19 +235,6 @@ const UserSelector = () => (
 const HomeScreen = () => {
   const { overlay } = useOverlayContext();
 
-  const { client: chatClient } = useChatContext();
-
-  useEffect(() => {
-    chatClient.setMessageComposerSetupFunction(({ composer }) => {
-      console.log('Setting up message composer:', composer.tag);
-      composer.updateConfig({
-        drafts: {
-          enabled: true,
-        },
-      });
-    });
-  }, [chatClient]);
-
   return (
     <Stack.Navigator
       initialRouteName={initialChannelIdGlobalRef.current ? 'ChannelScreen' : 'MessagingScreen'}

examples/SampleApp/src/screens/ChannelScreen.tsx

@@ -1,9 +1,5 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import type {
-  LocalMessage,
-  Channel as StreamChatChannel,
-  TextComposerMiddleware,
-} from 'stream-chat';
+import type { LocalMessage, Channel as StreamChatChannel } from 'stream-chat';
 import { RouteProp, useFocusEffect, useNavigation } from '@react-navigation/native';
 import {
   Channel,
@@ -17,7 +13,6 @@ import {
   useTheme,
   useTypingString,
   AITypingIndicatorView,
-  createTextComposerEmojiMiddleware,
 } from 'stream-chat-react-native';
 import { Platform, StyleSheet, View } from 'react-native';
 import type { StackNavigationProp } from '@react-navigation/stack';
@@ -30,10 +25,6 @@ import { useChannelMembersStatus } from '../hooks/useChannelMembersStatus';
 
 import type { StackNavigatorParamList } from '../types';
 import { NetworkDownIndicator } from '../components/NetworkDownIndicator';
-import { init, SearchIndex } from 'emoji-mart';
-import data from '@emoji-mart/data';
-
-init({ data });
 
 export type ChannelScreenNavigationProp = StackNavigationProp<
   StackNavigatorParamList,
@@ -148,20 +139,6 @@ export const ChannelScreen: React.FC<ChannelScreenProps> = ({
     setSelectedThread(undefined);
   });
 
-  useEffect(() => {
-    if (!chatClient) {
-      return;
-    }
-
-    chatClient.setMessageComposerSetupFunction(({ composer }) => {
-      composer.textComposer.middlewareExecutor.insert({
-        middleware: [createTextComposerEmojiMiddleware(SearchIndex) as TextComposerMiddleware],
-        position: { after: 'stream-io/text-composer/mentions-middleware' },
-        unique: true,
-      });
-    });
-  }, [chatClient]);
-
   const onThreadSelect = useCallback(
     (thread: LocalMessage | null) => {
       setSelectedThread(thread);