chore: remove duplicate screen headers from expo app

examples/ExpoMessaging/app/channel/[cid]/details/files.tsx

@@ -1,29 +1,27 @@
-import React, { useContext } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { useContext } from 'react';
+
+import { Stack } from 'expo-router';
 
 import { ChannelDetailsContextProvider, FileAttachmentList, useTheme } from 'stream-chat-expo';
 
-import { ScreenHeader } from '../../../../components/ScreenHeader';
 import { AppContext } from '../../../../context/AppContext';
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
-
 export default function ChannelFilesScreen() {
-  useTheme();
+  const {
+    theme: { semantics },
+  } = useTheme();
   const { channel } = useContext(AppContext);
 
   if (!channel) {
     return null;
   }
 
   return (
-    <View style={styles.flex}>
-      <ScreenHeader titleText='Files' />
+    <>
+      <Stack.Screen options={{ contentStyle: { backgroundColor: semantics.backgroundCoreApp } }} />
       <ChannelDetailsContextProvider value={{ channel }}>
         <FileAttachmentList />
       </ChannelDetailsContextProvider>
-    </View>
+    </>
   );
 }

examples/ExpoMessaging/app/channel/[cid]/details/images.tsx

@@ -1,28 +1,27 @@
-import React, { useContext } from 'react';
-import { StyleSheet, View } from 'react-native';
+import { useContext } from 'react';
 
-import { ChannelDetailsContextProvider, MediaList } from 'stream-chat-expo';
+import { Stack } from 'expo-router';
 
-import { ScreenHeader } from '../../../../components/ScreenHeader';
-import { AppContext } from '../../../../context/AppContext';
+import { ChannelDetailsContextProvider, MediaList, useTheme } from 'stream-chat-expo';
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
+import { AppContext } from '../../../../context/AppContext';
 
 export default function ChannelImagesScreen() {
+  const {
+    theme: { semantics },
+  } = useTheme();
   const { channel } = useContext(AppContext);
 
   if (!channel) {
     return null;
   }
 
   return (
-    <View style={styles.flex}>
-      <ScreenHeader titleText='Photos and Videos' />
+    <>
+      <Stack.Screen options={{ contentStyle: { backgroundColor: semantics.backgroundCoreApp } }} />
       <ChannelDetailsContextProvider value={{ channel }}>
         <MediaList />
       </ChannelDetailsContextProvider>
-    </View>
+    </>
   );
 }

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

@@ -1,6 +1,6 @@
 import React, { useCallback, useContext, useState } from 'react';
 
-import { useRouter } from 'expo-router';
+import { Stack, useRouter } from 'expo-router';
 
 import {
   ChannelAddMembersModal,
@@ -10,6 +10,7 @@ import {
   ChannelDetailsNavigationSectionType,
   GetChannelDetailsNavigationItems,
   GetChannelMemberActionItems,
+  WithComponents,
 } from 'stream-chat-expo';
 
 import { AppContext } from '../../../../context/AppContext';
@@ -22,18 +23,14 @@ const navigationItems: {
   files: 'files',
 };
 
+const Header = () => {
+  return null;
+};
+
 export default function ChannelDetailsScreen() {
   const router = useRouter();
   const { channel } = useContext(AppContext);
 
-  const onBack = useCallback(() => {
-    if (router.canGoBack()) {
-      router.back();
-    } else {
-      router.replace('/');
-    }
-  }, [router]);
-
   const getNavigationItems = useCallback<GetChannelDetailsNavigationItems>(
     ({ defaultItems }) =>
       defaultItems.map((item) => {
@@ -73,14 +70,20 @@ export default function ChannelDetailsScreen() {
 
   return (
     <>
-      <ChannelDetails
-        channel={channel}
-        getChannelMemberActionItems={getChannelMemberActionItems}
-        getNavigationItems={getNavigationItems}
-        onBack={onBack}
-        onChannelDismiss={popToRoot}
-        onViewAllMembersPress={handleAllMembersPress}
+      <Stack.Screen
+        options={{
+          title: 'Channel details',
+        }}
       />
+      <WithComponents overrides={{ ChannelDetailsNavHeader: Header }}>
+        <ChannelDetails
+          channel={channel}
+          getChannelMemberActionItems={getChannelMemberActionItems}
+          getNavigationItems={getNavigationItems}
+          onChannelDismiss={popToRoot}
+          onViewAllMembersPress={handleAllMembersPress}
+        />
+      </WithComponents>
       <ChannelDetailsContextProvider value={{ channel, getChannelMemberActionItems }}>
         <ChannelAllMembersModal
           onClose={handleAllMembersClose}

examples/ExpoMessaging/app/channel/[cid]/details/pinned.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useContext } from 'react';
-import { Pressable, StyleSheet, View } from 'react-native';
+import { Pressable } from 'react-native';
 
-import { useRouter } from 'expo-router';
+import { Stack, useRouter } from 'expo-router';
 
 import {
   ChannelDetailsContextProvider,
@@ -12,13 +12,8 @@ import {
   WithComponents,
 } from 'stream-chat-expo';
 
-import { ScreenHeader } from '../../../../components/ScreenHeader';
 import { AppContext } from '../../../../context/AppContext';
 
-const styles = StyleSheet.create({
-  flex: { flex: 1 },
-});
-
 /**
  * Custom pinned-message row that navigates back to the parent channel screen
  * with the tapped message's id, so the message list scrolls to and highlights
@@ -41,21 +36,23 @@ const PinnedMessage = (props: PinnedMessageItemProps) => {
 };
 
 export default function ChannelPinnedMessagesScreen() {
-  useTheme();
+  const {
+    theme: { semantics },
+  } = useTheme();
   const { channel } = useContext(AppContext);
 
   if (!channel) {
     return null;
   }
 
   return (
-    <View style={styles.flex}>
-      <ScreenHeader titleText='Pinned Messages' />
+    <>
+      <Stack.Screen options={{ contentStyle: { backgroundColor: semantics.backgroundCoreApp } }} />
       <ChannelDetailsContextProvider value={{ channel }}>
         <WithComponents overrides={{ PinnedMessageItem: PinnedMessage }}>
           <PinnedMessageList />
         </WithComponents>
       </ChannelDetailsContextProvider>
-    </View>
+    </>
   );
 }