diff options
Diffstat (limited to 'src/view/com/util/load-latest/LoadLatestBtn.tsx')
-rw-r--r-- | src/view/com/util/load-latest/LoadLatestBtn.tsx | 27 |
1 files changed, 18 insertions, 9 deletions
diff --git a/src/view/com/util/load-latest/LoadLatestBtn.tsx b/src/view/com/util/load-latest/LoadLatestBtn.tsx index f02e4a2bd..7e85e670f 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 ( <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, |