lenooby09.tech
mirror of https://git.lenooby09.tech/LeNooby09/social-app.git
match loadmore position to fab (#4280)
samuel.fm
+22
-13
+4
-4
src/view/com/util/fab/FABInner.tsx
+4
-4
src/view/com/util/fab/FABInner.tsx
···
4
4
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
5
import {LinearGradient} from 'expo-linear-gradient'
6
6
7
+
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
8
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
9
+
import {clamp} from '#/lib/numbers'
10
+
import {gradients} from '#/lib/styles'
7
11
import {isWeb} from '#/platform/detection'
8
-
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
9
-
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
10
-
import {clamp} from 'lib/numbers'
11
-
import {gradients} from 'lib/styles'
12
12
import {useInteractionState} from '#/components/hooks/useInteractionState'
13
13
14
14
export interface FABProps
+18
-9
src/view/com/util/load-latest/LoadLatestBtn.tsx
+18
-9
src/view/com/util/load-latest/LoadLatestBtn.tsx
···
1
1
import React from 'react'
2
2
import {StyleSheet, TouchableOpacity, View} from 'react-native'
3
-
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
4
3
import Animated from 'react-native-reanimated'
4
+
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
+
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
5
6
import {useMediaQuery} from 'react-responsive'
6
-
import {usePalette} from 'lib/hooks/usePalette'
7
-
import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
8
-
import {colors} from 'lib/styles'
9
-
import {HITSLOP_20} from 'lib/constants'
10
-
import {useMinimalShellMode} from 'lib/hooks/useMinimalShellMode'
7
+
8
+
import {HITSLOP_20} from '#/lib/constants'
9
+
import {useMinimalShellMode} from '#/lib/hooks/useMinimalShellMode'
10
+
import {usePalette} from '#/lib/hooks/usePalette'
11
+
import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
12
+
import {clamp} from '#/lib/numbers'
13
+
import {colors} from '#/lib/styles'
14
+
import {isWeb} from '#/platform/detection'
15
+
import {useSession} from '#/state/session'
16
+
11
17
const AnimatedTouchableOpacity =
12
18
Animated.createAnimatedComponent(TouchableOpacity)
13
-
import {isWeb} from 'platform/detection'
14
-
import {useSession} from 'state/session'
15
19
16
20
export function LoadLatestBtn({
17
21
onPress,
···
26
30
const {hasSession} = useSession()
27
31
const {isDesktop, isTablet, isMobile, isTabletOrMobile} = useWebMediaQueries()
28
32
const {fabMinimalShellTransform} = useMinimalShellMode()
33
+
const insets = useSafeAreaInsets()
29
34
30
35
// move button inline if it starts overlapping the left nav
31
36
const isTallViewport = useMediaQuery({minHeight: 700})
···
34
39
// it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
35
40
const showBottomBar = hasSession ? isMobile : isTabletOrMobile
36
41
42
+
const bottomPosition = isTablet
43
+
? {bottom: 50}
44
+
: {bottom: clamp(insets.bottom, 15, 60) + 15}
45
+
37
46
return (
38
47
<AnimatedTouchableOpacity
39
48
style={[
···
45
54
isTablet && styles.loadLatestInline,
46
55
pal.borderDark,
47
56
pal.view,
57
+
bottomPosition,
48
58
showBottomBar && fabMinimalShellTransform,
49
59
]}
50
60
onPress={onPress}
···
63
73
// @ts-ignore 'fixed' is web only -prf
64
74
position: isWeb ? 'fixed' : 'absolute',
65
75
left: 18,
66
-
bottom: 44,
67
76
borderWidth: 1,
68
77
width: 52,
69
78
height: 52,