Improve consistency of floating button positioning (#1501)

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<typeof TouchableWithoutFeedback> {
@@ -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 (
     <TouchableWithoutFeedback testID={testID} {...props}>
-      <Animated.View
+      <Animated.View style={[styles.outer, size, {right, bottom}, transform]}>
-        style={[
-          styles.outer,
-          size,
-          isWeb && isTablet
-            ? {
-                right: 50,
-                bottom: 50,
-              }
-            : {
-                bottom: 114,
-              },
-          transform,
-        ]}>
         <LinearGradient
           colors={[gradients.blueLight.start, gradients.blueLight.end]}
           start={{x: 0, y: 0}}
@@ -78,8 +69,6 @@ const styles = StyleSheet.create({
   outer: {
     position: 'absolute',
     zIndex: 1,
-    right: 24,
-    bottom: 94,
   },
   inner: {
     justifyContent: 'center',

src/view/com/util/load-latest/LoadLatestBtn.tsx

@@ -3,12 +3,13 @@ import {StyleSheet, TouchableOpacity, View} from 'react-native'
 import {observer} from 'mobx-react-lite'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {useSafeAreaInsets} from 'react-native-safe-area-context'
-import {clamp} from 'lodash'
 import {useStores} from 'state/index'
 import {usePalette} from 'lib/hooks/usePalette'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {colors} from 'lib/styles'
 import {HITSLOP_20} from 'lib/constants'
+import {isWeb} from 'platform/detection'
+import {clamp} from 'lib/numbers'
 
 export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
   onPress,
@@ -22,8 +23,12 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
 }) {
   const store = useStores()
   const pal = usePalette('default')
-  const {isDesktop, isTablet, isMobile} = useWebMediaQueries()
+  const {isDesktop, isTablet} = useWebMediaQueries()
   const safeAreaInsets = useSafeAreaInsets()
+  const minMode = store.shell.minimalShellMode
+  const bottom = isTablet
+    ? 50
+    : (minMode ? 16 : 60) + (isWeb ? 20 : clamp(safeAreaInsets.bottom, 15, 60))
   return (
     <TouchableOpacity
       style={[
@@ -32,10 +37,7 @@ export const LoadLatestBtn = observer(function LoadLatestBtnImpl({
         isTablet && styles.loadLatestTablet,
         pal.borderDark,
         pal.view,
-        isMobile &&
+        {bottom},
-          !store.shell.minimalShellMode && {
-            bottom: 60 + clamp(safeAreaInsets.bottom, 15, 30),
-          },
       ]}
       onPress={onPress}
       hitSlop={HITSLOP_20}
@@ -52,7 +54,7 @@ const styles = StyleSheet.create({
   loadLatest: {
     position: 'absolute',
     left: 18,
-    bottom: 35,
+    bottom: 44,
     borderWidth: 1,
     width: 52,
     height: 52,