zio/bsky-app
2
0
Fork 0
Code Pull requests Releases Packages Activity

match loadmore position to fab (#4280)

Browse source
This commit is contained in:
Samuel Newman 2024-05-30 14:40:22 +03:00 • committed by GitHub
parent 3bdceac2fb
commit b077cbe399
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 22 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

8
src/view/com/util/fab/FABInner.tsx
View file

@ -4,11 +4,11 @@ import Animated, {useAnimatedStyle, withTiming} from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {LinearGradient} from 'expo-linear-gradient'
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {clamp} from '#/lib/numbers'
import {gradients} from '#/lib/styles'
import {isWeb} from '#/platform/detection'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {clamp} from 'lib/numbers'
import {gradients} from 'lib/styles'
import {useInteractionState} from '#/components/hooks/useInteractionState'
export interface FABProps

27
src/view/com/util/load-latest/LoadLatestBtn.tsx
View file

@ -1,17 +1,21 @@
import React from 'react'
import {StyleSheet, TouchableOpacity, View} from 'react-native'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {useMediaQuery} from 'react-responsive'
import {usePalette} from 'lib/hooks/usePalette'
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
import {colors} from 'lib/styles'
import {HITSLOP_20} from 'lib/constants'
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
import {HITSLOP_20} from '#/lib/constants'
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
import {usePalette} from '#/lib/hooks/usePalette'
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
import {clamp} from '#/lib/numbers'
import {colors} from '#/lib/styles'
import {isWeb} from '#/platform/detection'
import {useSession} from '#/state/session'
const AnimatedTouchableOpacity =
Animated.createAnimatedComponent(TouchableOpacity)
import {isWeb} from 'platform/detection'
import {useSession} from 'state/session'
export function LoadLatestBtn({
onPress,
@ -26,6 +30,7 @@ export function LoadLatestBtn({
const {hasSession} = useSession()
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
const {fabMinimalShellTransform} = useMinimalShellMode()
const insets = useSafeAreaInsets()
// move button inline if it starts overlapping the left nav
const isTallViewport = useMediaQuery({minHeight: 700})
@ -34,6 +39,10 @@ export function LoadLatestBtn({
// it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
const showBottomBar = hasSession ? isMobile : isTabletOrMobile
const bottomPosition = isTablet
? {bottom: 50}
: {bottom: clamp(insets.bottom, 15, 60) + 15}
return (
<AnimatedTouchableOpacity
style={[
@ -45,6 +54,7 @@ export function LoadLatestBtn({
isTablet && styles.loadLatestInline,
pal.borderDark,
pal.view,
bottomPosition,
showBottomBar && fabMinimalShellTransform,
]}
onPress={onPress}
@ -63,7 +73,6 @@ const styles = StyleSheet.create({
// @ts-ignore 'fixed' is web only -prf
position: isWeb ? 'fixed' : 'absolute',
left: 18,
bottom: 44,
borderWidth: 1,
width: 52,
height: 52,