match loadmore position to fab (#4280)

bluesky-social · May 30, 2024 · b077cbe · b077cbe
1 parent 3bdceac
commit b077cbe
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 13 deletions.
diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx
@@ -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

diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx
@@ -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,