From 919a764513ff00a5c730a8e8f0a004b89e9324e8 Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Wed, 17 Jun 2026 13:32:54 -0500 Subject: [PATCH] fix: remove duplicate screen headers from expo app --- .../app/channel/[cid]/details/files.tsx | 20 +- .../app/channel/[cid]/details/images.tsx | 21 +- .../app/channel/[cid]/details/index.tsx | 35 ++-- .../app/channel/[cid]/details/pinned.tsx | 19 +- .../ExpoMessaging/components/ScreenHeader.tsx | 186 ------------------ 5 files changed, 46 insertions(+), 235 deletions(-) delete mode 100644 examples/ExpoMessaging/components/ScreenHeader.tsx diff --git a/examples/ExpoMessaging/app/channel/[cid]/details/files.tsx b/examples/ExpoMessaging/app/channel/[cid]/details/files.tsx index e2e15b5baf..1205fe05b8 100644 --- a/examples/ExpoMessaging/app/channel/[cid]/details/files.tsx +++ b/examples/ExpoMessaging/app/channel/[cid]/details/files.tsx @@ -1,17 +1,15 @@ -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) { @@ -19,11 +17,11 @@ export default function ChannelFilesScreen() { } return ( - - + <> + - + ); } diff --git a/examples/ExpoMessaging/app/channel/[cid]/details/images.tsx b/examples/ExpoMessaging/app/channel/[cid]/details/images.tsx index 07c3c18fc4..6b4454be7e 100644 --- a/examples/ExpoMessaging/app/channel/[cid]/details/images.tsx +++ b/examples/ExpoMessaging/app/channel/[cid]/details/images.tsx @@ -1,16 +1,15 @@ -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) { @@ -18,11 +17,11 @@ export default function ChannelImagesScreen() { } return ( - - + <> + - + ); } diff --git a/examples/ExpoMessaging/app/channel/[cid]/details/index.tsx b/examples/ExpoMessaging/app/channel/[cid]/details/index.tsx index 5cd226519e..b4f0d6b5da 100644 --- a/examples/ExpoMessaging/app/channel/[cid]/details/index.tsx +++ b/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( ({ defaultItems }) => defaultItems.map((item) => { @@ -73,14 +70,20 @@ export default function ChannelDetailsScreen() { return ( <> - + + + { }; export default function ChannelPinnedMessagesScreen() { - useTheme(); + const { + theme: { semantics }, + } = useTheme(); const { channel } = useContext(AppContext); if (!channel) { @@ -49,13 +46,13 @@ export default function ChannelPinnedMessagesScreen() { } return ( - - + <> + - + ); } diff --git a/examples/ExpoMessaging/components/ScreenHeader.tsx b/examples/ExpoMessaging/components/ScreenHeader.tsx deleted file mode 100644 index e332d3840b..0000000000 --- a/examples/ExpoMessaging/components/ScreenHeader.tsx +++ /dev/null @@ -1,186 +0,0 @@ -import React from 'react'; -import { - ColorValue, - StyleProp, - StyleSheet, - Text, - TouchableOpacity, - View, - ViewStyle, -} from 'react-native'; -import { useSafeAreaInsets } from 'react-native-safe-area-context'; -import Svg, { Path } from 'react-native-svg'; - -import { useRouter } from 'expo-router'; - -import { useTheme } from 'stream-chat-expo'; - -const ChevronLeft = ({ color, size = 20 }: { color: ColorValue; size?: number }) => ( - - - -); - -const HEADER_CONTENT_HEIGHT = 64; - -const styles = StyleSheet.create({ - backButton: { - alignItems: 'center', - height: 40, - justifyContent: 'center', - width: 40, - }, - centerContainer: { - alignItems: 'center', - flex: 1, - justifyContent: 'center', - }, - contentContainer: { - alignItems: 'center', - flexDirection: 'row', - padding: 8, - }, - leftContainer: { - width: 70, - }, - rightContainer: { - alignItems: 'flex-end', - width: 70, - }, - safeAreaContainer: { - borderBottomWidth: 1, - }, - subTitle: { - fontSize: 12, - }, - title: { - fontSize: 16, - fontWeight: '700', - }, -}); - -type BackButtonProps = { - onBack?: () => void; -}; - -const BackButton: React.FC = ({ onBack }) => { - const router = useRouter(); - const { - theme: { semantics }, - } = useTheme(); - - return ( - { - if (onBack) { - onBack(); - return; - } - if (router.canGoBack()) { - router.back(); - } else { - // If opened deeply (e.g., via push notification), fall back to root. - router.replace('/'); - } - }} - style={styles.backButton} - > - - - ); -}; - -type ScreenHeaderProps = { - titleText: string; - inSafeArea?: boolean; - LeftContent?: React.ElementType; - onBack?: () => void; - RightContent?: React.ElementType; - style?: StyleProp; - Subtitle?: React.ElementType; - subtitleText?: string; - Title?: React.ElementType; -}; - -/** - * ExpoMessaging variant of SampleApp's ScreenHeader. Uses Expo Router's - * `useRouter` for back navigation and the SDK's theme tokens. No unread-count - * badge or drawer dependency — kept lean for the example app. - */ -export const ScreenHeader: React.FC = ({ - inSafeArea, - LeftContent, - onBack, - RightContent = () => , - style, - Subtitle, - subtitleText, - Title, - titleText = 'Stream Chat', -}) => { - const { - theme: { semantics }, - } = useTheme(); - const insets = useSafeAreaInsets(); - - return ( - - - - {LeftContent ? : } - - - - {Title ? ( - - ) : ( - !!titleText && ( - <Text numberOfLines={1} style={[styles.title, { color: semantics.textPrimary }]}> - {titleText} - </Text> - ) - )} - </View> - {Subtitle ? ( - <Subtitle /> - ) : ( - !!subtitleText && ( - <Text numberOfLines={1} style={[styles.subTitle, { color: semantics.textSecondary }]}> - {subtitleText} - </Text> - ) - )} - </View> - <View style={styles.rightContainer}> - <RightContent /> - </View> - </View> - </View> - ); -};