Ensure load more is always visible
parent
135628baf2
commit
9ad9bc5c0e
|
@ -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,
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in New Issue