[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 webzio/stable
parent
71af9fd04b
commit
9b9f339e3e
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in New Issue