[APP-686] Fix mobile web styling (#876)

* fix desktop window size

* fix desktop window size

* add listener for resize events

* fix when going from mobile to web

* only add eventListener for web
zio/stable
Ansh 2023-06-14 13:26:44 -07:00 committed by GitHub
parent 71af9fd04b
commit 9b9f339e3e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 7 deletions

View File

@ -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

View File

@ -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<HomeTabNavigatorParams, 'Home'>
@ -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<FlatList>(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) && (
<LoadLatestBtn