diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index ccf2f31dbf..c9443127b8 100644 --- 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 index f02e4a2bd7..7e85e670f4 100644 --- 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 (