diff --git a/src/view/com/util/fab/FABInner.tsx b/src/view/com/util/fab/FABInner.tsx index f5a3e6b5..6c96eef2 100644 --- a/src/view/com/util/fab/FABInner.tsx +++ b/src/view/com/util/fab/FABInner.tsx @@ -6,7 +6,8 @@ import {gradients} from 'lib/styles' import {useAnimatedValue} from 'lib/hooks/useAnimatedValue' import {useStores} from 'state/index' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {isWeb} from 'platform/detection' +import {useSafeAreaInsets} from 'react-native-safe-area-context' +import {clamp} from 'lib/numbers' export interface FABProps extends ComponentProps { @@ -19,12 +20,13 @@ export const FABInner = observer(function FABInnerImpl({ icon, ...props }: FABProps) { + const insets = useSafeAreaInsets() const {isTablet} = useWebMediaQueries() const store = useStores() const interp = useAnimatedValue(0) React.useEffect(() => { Animated.timing(interp, { - toValue: store.shell.minimalShellMode ? 1 : 0, + toValue: store.shell.minimalShellMode ? 0 : 1, duration: 100, useNativeDriver: true, isInteraction: false, @@ -33,25 +35,14 @@ export const FABInner = observer(function FABInnerImpl({ const transform = isTablet ? undefined : { - transform: [{translateY: Animated.multiply(interp, 60)}], + transform: [{translateY: Animated.multiply(interp, -44)}], } const size = isTablet ? styles.sizeLarge : styles.sizeRegular + const right = isTablet ? 50 : 24 + const bottom = isTablet ? 50 : clamp(insets.bottom, 15, 60) + 15 return ( - +