Ensure load more is always visible

zio/stable
Paul Frazee 2022-12-13 15:36:05 -06:00
parent 135628baf2
commit 9ad9bc5c0e
2 changed files with 9 additions and 5 deletions

View File

@ -3,6 +3,7 @@ import {StyleSheet, Text, TouchableOpacity, View} from 'react-native'
import {observer} from 'mobx-react-lite' import {observer} from 'mobx-react-lite'
import useAppState from 'react-native-appstate-hook' import useAppState from 'react-native-appstate-hook'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {Feed} from '../com/posts/Feed' import {Feed} from '../com/posts/Feed'
import {useStores} from '../../state' import {useStores} from '../../state'
@ -10,6 +11,7 @@ import {FeedModel} from '../../state/models/feed-view'
import {ScreenParams} from '../routes' import {ScreenParams} from '../routes'
import {s, colors} from '../lib/styles' import {s, colors} from '../lib/styles'
import {useOnMainScroll} from '../lib/useOnMainScroll' import {useOnMainScroll} from '../lib/useOnMainScroll'
import {clamp} from 'lodash'
const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20} const HITSLOP = {left: 20, top: 20, right: 20, bottom: 20}
@ -20,6 +22,7 @@ export const Home = observer(function Home({
}: ScreenParams) { }: ScreenParams) {
const store = useStores() const store = useStores()
const onMainScroll = useOnMainScroll(store) const onMainScroll = useOnMainScroll(store)
const safeAreaInsets = useSafeAreaInsets()
const [hasSetup, setHasSetup] = useState<boolean>(false) const [hasSetup, setHasSetup] = useState<boolean>(false)
const {appState} = useAppState({ const {appState} = useAppState({
onForeground: () => doPoll(true), onForeground: () => doPoll(true),
@ -88,6 +91,7 @@ export const Home = observer(function Home({
<ViewHeader <ViewHeader
title="Bluesky" title="Bluesky"
subtitle="Private Beta" subtitle="Private Beta"
canGoBack={false}
onPost={onCreatePost} onPost={onCreatePost}
/> />
<Feed <Feed
@ -103,7 +107,9 @@ export const Home = observer(function Home({
<TouchableOpacity <TouchableOpacity
style={[ style={[
styles.loadLatest, styles.loadLatest,
store.shell.minimalShellMode ? styles.loadLatestLow : undefined, store.shell.minimalShellMode
? {bottom: 50}
: {bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30)},
]} ]}
onPress={onPressLoadLatest} onPress={onPressLoadLatest}
hitSlop={HITSLOP}> hitSlop={HITSLOP}>
@ -120,7 +126,6 @@ const styles = StyleSheet.create({
flexDirection: 'row', flexDirection: 'row',
position: 'absolute', position: 'absolute',
left: 10, left: 10,
bottom: 60,
backgroundColor: colors.pink3, backgroundColor: colors.pink3,
paddingHorizontal: 12, paddingHorizontal: 12,
paddingVertical: 10, paddingVertical: 10,

View File

@ -1,9 +1,8 @@
import React, {useState, useEffect} from 'react' import React, {useEffect} from 'react'
import {View} from 'react-native' import {View} from 'react-native'
import {ViewHeader} from '../com/util/ViewHeader' import {ViewHeader} from '../com/util/ViewHeader'
import {Feed} from '../com/notifications/Feed' import {Feed} from '../com/notifications/Feed'
import {useStores} from '../../state' import {useStores} from '../../state'
import {NotificationsViewModel} from '../../state/models/notifications-view'
import {ScreenParams} from '../routes' import {ScreenParams} from '../routes'
import {useOnMainScroll} from '../lib/useOnMainScroll' import {useOnMainScroll} from '../lib/useOnMainScroll'
@ -34,7 +33,7 @@ export const Notifications = ({navIdx, visible}: ScreenParams) => {
return ( return (
<View style={{flex: 1}}> <View style={{flex: 1}}>
<ViewHeader title="Notifications" /> <ViewHeader title="Notifications" canGoBack={false} />
<Feed <Feed
view={store.me.notifications} view={store.me.notifications}
onPressTryAgain={onPressTryAgain} onPressTryAgain={onPressTryAgain}