diff --git a/src/platform/detection.ts b/src/platform/detection.ts index 5d2ffcb2..da33fdca 100644 --- a/src/platform/detection.ts +++ b/src/platform/detection.ts @@ -4,8 +4,9 @@ export const isIOS = Platform.OS === 'ios' export const isAndroid = Platform.OS === 'android' export const isNative = isIOS || isAndroid export const isWeb = !isNative +export const isMobileWebMediaQuery = 'only screen and (max-width: 1230px)' export const isMobileWeb = isWeb && // @ts-ignore we know window exists -prf - global.window.matchMedia('only screen and (max-width: 1000px)')?.matches + global.window.matchMedia(isMobileWebMediaQuery)?.matches export const isDesktopWeb = isWeb && !isMobileWeb diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx index f18e9d3a..4b90c214 100644 --- a/src/view/screens/Home.tsx +++ b/src/view/screens/Home.tsx @@ -21,9 +21,13 @@ import {s} from 'lib/styles' import {useOnMainScroll} from 'lib/hooks/useOnMainScroll' import {useAnalytics} from 'lib/analytics' import {ComposeIcon2} from 'lib/icons' -import {isDesktopWeb} from 'platform/detection' +import {isDesktopWeb, isMobileWebMediaQuery, isWeb} from 'platform/detection' -const HEADER_OFFSET = isDesktopWeb ? 50 : 78 +const HEADER_OFFSET_MOBILE = 78 +const HEADER_OFFSET_DESKTOP = 50 +const HEADER_OFFSET = isDesktopWeb + ? HEADER_OFFSET_DESKTOP + : HEADER_OFFSET_MOBILE const POLL_FREQ = 30e3 // 30sec type Props = NativeStackScreenProps @@ -152,6 +156,7 @@ const FeedPage = observer( const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store) const {screen, track} = useAnalytics() + const [headerOffset, setHeaderOffset] = React.useState(HEADER_OFFSET) const scrollElRef = React.useRef(null) const {appState} = useAppState({ onForeground: () => doPoll(true), @@ -177,9 +182,9 @@ const FeedPage = observer( ) const scrollToTop = React.useCallback(() => { - scrollElRef.current?.scrollToOffset({offset: -HEADER_OFFSET}) + scrollElRef.current?.scrollToOffset({offset: -headerOffset}) resetMainScroll() - }, [scrollElRef, resetMainScroll]) + }, [headerOffset, resetMainScroll]) const onSoftReset = React.useCallback(() => { if (isPageFocused) { @@ -188,6 +193,17 @@ const FeedPage = observer( } }, [isPageFocused, scrollToTop, feed]) + // listens for resize events + const listenForResize = React.useCallback(() => { + // @ts-ignore we know window exists -prf + const isMobileWeb = global.window.matchMedia( + isMobileWebMediaQuery, + )?.matches + setHeaderOffset( + isMobileWeb ? HEADER_OFFSET_MOBILE : HEADER_OFFSET_DESKTOP, + ) + }, []) + // fires when screen is activated/deactivated // - set up polls/listeners, update content useFocusEffect( @@ -229,7 +245,11 @@ const FeedPage = observer( if (isPageFocused && isScreenFocused) { feed.checkForLatest() } - }, [isPageFocused, isScreenFocused, feed]) + isWeb && window.addEventListener('resize', listenForResize) + return () => { + isWeb && window.removeEventListener('resize', listenForResize) + } + }, [isPageFocused, isScreenFocused, feed, listenForResize]) const onPressCompose = React.useCallback(() => { track('HomeScreen:PressCompose') @@ -258,7 +278,7 @@ const FeedPage = observer( onScroll={onMainScroll} scrollEventThrottle={100} renderEmptyState={renderEmptyState} - headerOffset={HEADER_OFFSET} + headerOffset={headerOffset} /> {(isScrolledDown || hasNew) && (