Next Release

examples/ExpoMessaging/app/_layout.tsx

@@ -1,23 +1,26 @@
-import { Stack } from "expo-router";
-import { GestureHandlerRootView } from "react-native-gesture-handler";
-import { ChatWrapper } from "../components/ChatWrapper";
-import { AppProvider } from "../context/AppContext";
-import { StyleSheet } from "react-native";
+import { Stack } from 'expo-router';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { ChatWrapper } from '../components/ChatWrapper';
+import { AppProvider } from '../context/AppContext';
+import { StyleSheet } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 export default function Layout() {
-    return (
-        <GestureHandlerRootView style={styles.container}>
-            <ChatWrapper>
-                <AppProvider>
-                    <Stack />
-                </AppProvider>
-            </ChatWrapper>
-        </GestureHandlerRootView>
-    );
+  return (
+    <SafeAreaProvider>
+      <GestureHandlerRootView style={styles.container}>
+        <ChatWrapper>
+          <AppProvider>
+            <Stack />
+          </AppProvider>
+        </ChatWrapper>
+      </GestureHandlerRootView>
+    </SafeAreaProvider>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-    },
+  container: {
+    flex: 1,
+  },
 });

examples/ExpoMessaging/app/channel/[cid]/index.tsx

@@ -1,13 +1,21 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { SafeAreaView, View } from 'react-native';
-import { Channel, MessageInput, MessageList } from 'stream-chat-expo';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Channel, MessageInput, MessageList, useAttachmentPickerContext } from 'stream-chat-expo';
 import { Stack, useRouter } from 'expo-router';
 import { AuthProgressLoader } from '../../../components/AuthProgressLoader';
 import { AppContext } from '../../../context/AppContext';
+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 />;

examples/ExpoMessaging/components/ChatWrapper.tsx

@@ -4,12 +4,14 @@ import { useChatClient } from '../hooks/useChatClient';
 import { AuthProgressLoader } from './AuthProgressLoader';
 import { StreamChatGenerics } from '../types';
 import { STREAM_API_KEY, user, userToken } from '../constants';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 const streami18n = new Streami18n({
   language: 'en',
 });
 
 export const ChatWrapper = ({ children }: PropsWithChildren<{}>) => {
+  const { bottom } = useSafeAreaInsets();
   const chatClient = useChatClient({
     apiKey: STREAM_API_KEY,
     userData: user,
@@ -21,7 +23,7 @@ export const ChatWrapper = ({ children }: PropsWithChildren<{}>) => {
   }
 
   return (
-    <OverlayProvider<StreamChatGenerics> i18nInstance={streami18n}>
+    <OverlayProvider<StreamChatGenerics> bottomInset={bottom} i18nInstance={streami18n}>
       <Chat client={chatClient} i18nInstance={streami18n} enableOfflineSupport={true}>
         {children}
       </Chat>

examples/ExpoMessaging/package.json

@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@react-native-community/netinfo": "11.1.0",
+    "@react-navigation/elements": "^1.3.30",
     "expo": "~50.0.14",
     "expo-av": "~13.10.5",
     "expo-clipboard": "~5.0.1",