diff options
| -rw-r--r-- | src/view/com/util/fab/FABInner.tsx | 8 | ||||
| -rw-r--r-- | src/view/com/util/load-latest/LoadLatestBtn.tsx | 27 |
2 files changed, 22 insertions, 13 deletions
diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index ccf2f31db..c9443127b 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 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, |