GetStream · isekovanic · Jun 26, 2025 · Jun 26, 2025
diff --git a/examples/ExpoMessaging/app/channel/[cid]/index.tsx b/examples/ExpoMessaging/app/channel/[cid]/index.tsx
@@ -1,6 +1,6 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext } from 'react';
 import { SafeAreaView, View } from 'react-native';
-import { Channel, MessageInput, MessageList, useAttachmentPickerContext } from 'stream-chat-expo';
+import { Channel, MessageInput, MessageList } from 'stream-chat-expo';
 import { Stack, useRouter } from 'expo-router';
 import { AuthProgressLoader } from '../../../components/AuthProgressLoader';
 import { AppContext } from '../../../context/AppContext';
@@ -9,13 +9,8 @@ import { useHeaderHeight } from '@react-navigation/elements';
 export default function ChannelScreen() {
   const router = useRouter();
   const { setThread, channel } = useContext(AppContext);
-  const { setTopInset } = useAttachmentPickerContext();
   const headerHeight = useHeaderHeight();
 
-  useEffect(() => {
-    setTopInset(headerHeight);
-  }, [headerHeight, setTopInset]);
-
   if (!channel) {
     return <AuthProgressLoader />;
   }

diff --git a/examples/ExpoMessaging/components/ChatWrapper.tsx b/examples/ExpoMessaging/components/ChatWrapper.tsx
@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, useRef } from 'react';
+import React, { PropsWithChildren } from 'react';
 import {
   Chat,
   OverlayProvider,
@@ -8,7 +8,6 @@ import {
 } from 'stream-chat-expo';
 import { AuthProgressLoader } from './AuthProgressLoader';
 import { STREAM_API_KEY, user, userToken } from '../constants';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useStreamChatTheme } from '../useStreamChatTheme';
 
 const streami18n = new Streami18n({
@@ -20,7 +19,6 @@ SqliteClient.logger = (level, message, extraData) => {
 };
 
 export const ChatWrapper = ({ children }: PropsWithChildren<{}>) => {
-  const { bottom } = useSafeAreaInsets();
   const chatClient = useCreateChatClient({
     apiKey: STREAM_API_KEY,
     userData: user,
@@ -33,12 +31,8 @@ export const ChatWrapper = ({ children }: PropsWithChildren<{}>) => {
   }
 
   return (
-    <OverlayProvider
-      bottomInset={bottom}
-      i18nInstance={streami18n}
-      value={{ style: theme }}
-    >
-      <Chat enableOfflineSupport client={chatClient} i18nInstance={streami18n}>
+    <OverlayProvider i18nInstance={streami18n} value={{ style: theme }}>
+      <Chat client={chatClient} i18nInstance={streami18n}>
         {children}
       </Chat>
     </OverlayProvider>

diff --git a/examples/ExpoMessaging/yarn.lock b/examples/ExpoMessaging/yarn.lock
@@ -1404,6 +1404,11 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.27.1":
+  version "7.27.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.6.tgz#ec4070a04d76bae8ddbb10770ba55714a417b7c6"
+  integrity sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==
+
 "@babel/template@^7.20.7", "@babel/template@^7.21.9":
   version "7.21.9"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.21.9.tgz#bf8dad2859130ae46088a99c1f265394877446fb"
@@ -2581,6 +2586,11 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@ungap/structured-clone@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.3.0.tgz#d06bbb384ebcf6c505fde1c3d0ed4ddffe0aaff8"
+  integrity sha512-WmoN8qaIAo7WTYWbAZuG8PYEhn5fkz7dZrqTBZ7dtt//lL2Gwms1IcnQ5yHqjDfX8Ft5j4YzDM23f87zBfDe9g==
+
 "@urql/core@^5.0.0", "@urql/core@^5.0.6":
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/@urql/core/-/core-5.0.8.tgz#eba39eaa2bf9a0a963383e87a65cba7a9ca794bd"
@@ -4120,6 +4130,13 @@ i18next@^21.10.0:
   dependencies:
     "@babel/runtime" "^7.17.2"
 
+i18next@^25.2.1:
+  version "25.2.1"
+  resolved "https://registry.yarnpkg.com/i18next/-/i18next-25.2.1.tgz#23cf8794904f551f577558d93c84b0fb6cd489a2"
+  integrity sha512-+UoXK5wh+VlE1Zy5p6MjcvctHXAhRwQKCxiJD8noKZzIXmnAX8gdHX5fLPA3MEVxEN4vbZkQFy8N0LyD9tUqPw==
+  dependencies:
+    "@babel/runtime" "^7.27.1"
+
 ieee754@^1.1.13:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.2.1.tgz#8eb7a10a63fff25d15a57b001586d177d1b0d352"
@@ -6110,10 +6127,10 @@ stream-buffers@2.2.x:
   version "0.0.0"
   uid ""
 
-stream-chat-react-native-core@7.1.2:
-  version "7.1.2"
-  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.1.2.tgz#5870a1188ecbf8c3b705d74379d19ff77efce2c5"
-  integrity sha512-Ob+V8tt+7L+7BRkWyWbFlju6E/8MAoB/NUZ8ENtEEijq5QBNWnVvZctQSZuekIOVrfoP9EenlIOPadHnN/mvYA==
+stream-chat-react-native-core@7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/stream-chat-react-native-core/-/stream-chat-react-native-core-7.2.0.tgz#9c60f0235a84f22077dd56c57a532e19701dcd15"
+  integrity sha512-DXToshO7/6Bu+Rk03fTeP3W3LFlkOpRph/Iu9OtAU0QzDdG2IgMa1tNhiDEmFmJHjWROjFZtBmyV1Cuk4vFiAQ==
   dependencies:
     "@gorhom/bottom-sheet" "^5.1.6"
     dayjs "1.11.13"
@@ -6133,10 +6150,10 @@ stream-chat-react-native-core@7.1.2:
   version "0.0.0"
   uid ""
 
-stream-chat@^9.7.0:
-  version "9.7.0"
-  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.7.0.tgz#8302a4dfd2b68115c57cd0a102976542a79cf132"
-  integrity sha512-8K4RQAUFfznCxpJ5CMIrMQQLroaZ1snB4aR/Xnwa9UpxNCzn3kIi61AVkfsaHTHGojPz5LA3c3faVb251u4HnA==
+stream-chat@^9.7.0, stream-chat@^9.9.0:
+  version "9.9.0"
+  resolved "https://registry.yarnpkg.com/stream-chat/-/stream-chat-9.9.0.tgz#59ac996e6e0ca6b3e3a0041954ae99a43541ec13"
+  integrity sha512-4tqedL7NfDhwJIKRBKGdvNu4x0ifKO+qxyc9TEWe+LLaW3Qed4txKysrVKnDfj/rx3iZuIwrMV7VeW5yxZfP5w==
   dependencies:
     "@types/jsonwebtoken" "^9.0.8"
     "@types/ws" "^8.5.14"

diff --git a/examples/SampleApp/App.tsx b/examples/SampleApp/App.tsx
@@ -3,10 +3,12 @@ import { DevSettings, LogBox, Platform, useColorScheme } from 'react-native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
 import { DarkTheme, DefaultTheme, NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 import {
   Chat,
+  createTextComposerEmojiMiddleware,
   OverlayProvider,
+  setupCommandUIMiddlewares,
   SqliteClient,
   ThemeProvider,
   useOverlayContext,
@@ -34,8 +36,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)', () => {
@@ -118,6 +124,31 @@ const App = () => {
     };
   }, []);
 
+  useEffect(() => {
+    if (!chatClient) {
+      return;
+    }
+    chatClient.setMessageComposerSetupFunction(({ composer }) => {
+      composer.updateConfig({
+        drafts: {
+          enabled: true,
+        },
+      });
+
+      setupCommandUIMiddlewares(composer);
+
+      composer.textComposer.middlewareExecutor.insert({
+        middleware: [
+          createTextComposerEmojiMiddleware({
+            emojiSearchIndex: SearchIndex,
+          }) as TextComposerMiddleware,
+        ],
+        position: { after: 'stream-io/text-composer/mentions-middleware' },
+        unique: true,
+      });
+    });
+  }, [chatClient]);
+
   return (
     <SafeAreaProvider
       style={{
@@ -169,12 +200,11 @@ const isMessageAIGenerated = (message: LocalMessage) => !!message.ai_generated;
 const DrawerNavigatorWrapper: React.FC<{
   chatClient: StreamChat;
 }> = ({ chatClient }) => {
-  const { bottom } = useSafeAreaInsets();
   const streamChatTheme = useStreamChatTheme();
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
-      <OverlayProvider bottomInset={bottom} value={{ style: streamChatTheme }}>
+      <OverlayProvider value={{ style: streamChatTheme }}>
         <Chat
           client={chatClient}
           enableOfflineSupport

diff --git a/examples/SampleApp/ios/Podfile.lock b/examples/SampleApp/ios/Podfile.lock
@@ -2425,7 +2425,7 @@ PODS:
     - libwebp (~> 1.0)
     - SDWebImage/Core (~> 5.10)
   - SocketRocket (0.7.1)
-  - stream-chat-react-native (7.1.2):
+  - stream-chat-react-native (7.2.0):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -2872,7 +2872,7 @@ SPEC CHECKSUMS:
   SDWebImage: a7f831e1a65eb5e285e3fb046a23fcfbf08e696d
   SDWebImageWebPCoder: 908b83b6adda48effe7667cd2b7f78c897e5111d
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
-  stream-chat-react-native: 45d46c6a3188edf8dfe9c85cd884457ccc232b74
+  stream-chat-react-native: 2de2866392bfecadf005ec5f0b1f882b613b89ba
   Yoga: b2eaabf17044cd4273a661b14eb83f9fd2c90491
 
 PODFILE CHECKSUM: 4f662370295f8f9cee909f1a4c59a614999a209d

diff --git a/examples/SampleApp/package.json b/examples/SampleApp/package.json
@@ -23,6 +23,7 @@
     "clean-all": "yarn clean && rm -rf node_modules && rm -rf ios/Pods && rm -rf vendor && bundle install && yarn install && cd ios && bundle exec pod install && cd -"
   },
   "dependencies": {
+    "@emoji-mart/data": "^1.2.1",
     "@notifee/react-native": "^9.1.8",
     "@op-engineering/op-sqlite": "^14.0.4",
     "@react-native-async-storage/async-storage": "^2.2.0",
@@ -36,6 +37,8 @@
     "@react-navigation/native": "^7.1.10",
     "@react-navigation/stack": "^7.3.3",
     "react": "19.0.0",
+    "emoji-mart": "^5.6.0",
+    "lodash.mergewith": "^4.6.2",
     "react-native": "^0.79.3",
     "react-native-audio-recorder-player": "^3.6.13",
     "react-native-blob-util": "^0.22.2",
@@ -64,6 +67,7 @@
     "@react-native/typescript-config": "0.79.3",
     "@rnx-kit/metro-config": "^2.1.0",
     "@types/jest": "^29.5.14",
+    "@types/lodash.mergewith": "^4.6.9",
     "@types/react": "^19.0.0",
     "@types/react-test-renderer": "^19.0.0",
     "eslint": "^9.28.0",

diff --git a/examples/SampleApp/src/components/BottomTabs.tsx b/examples/SampleApp/src/components/BottomTabs.tsx
@@ -11,6 +11,7 @@ import { MentionsTab } from '../icons/MentionsTab';
 
 import type { BottomTabBarProps } from '@react-navigation/bottom-tabs';
 import type { Route } from '@react-navigation/native';
+import { DraftsTab } from '../icons/DraftsTab';
 
 const styles = StyleSheet.create({
   notification: {
@@ -44,6 +45,13 @@ const getTab = (key: string) => {
         notification: <ChannelsUnreadCountBadge />,
         title: 'Chats',
       };
+    case 'DraftsScreen':
+      return {
+        icon: <DraftsTab />,
+        iconActive: <DraftsTab active />,
+        title: 'Drafts',
+        notification: <ChannelsUnreadCountBadge />,
+      };
     case 'ThreadsScreen':
       return {
         icon: <ThreadsTab />,

diff --git a/examples/SampleApp/src/components/ChannelPreview.tsx b/examples/SampleApp/src/components/ChannelPreview.tsx
@@ -71,9 +71,7 @@ const CustomChannelPreviewStatus = (
   );
 };
 
-export const ChannelPreview: React.FC<ChannelPreviewMessengerProps> = (
-  props,
-) => {
+export const ChannelPreview: React.FC<ChannelPreviewMessengerProps> = (props) => {
   const { channel } = props;
 
   const { setOverlay } = useAppOverlayContext();