forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix trending swipe gesture (#7417)
+105
-79
+87
-77
src/components/interstitials/Trending.tsx
+87
-77
src/components/interstitials/Trending.tsx
···
1
-
import React from 'react'
2
-
import {View} from 'react-native'
3
-
import {ScrollView} from 'react-native-gesture-handler'
1
+
import React, {useContext} from 'react'
2
+
import {ScrollView, View} from 'react-native'
3
+
import {GestureDetector} from 'react-native-gesture-handler'
4
4
import {msg} from '@lingui/macro'
5
5
import {useLingui} from '@lingui/react'
6
6
···
12
12
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
13
13
import {useTrendingConfig} from '#/state/trending-config'
14
14
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
15
+
import {TrendingGestureContext} from '#/view/shell/TrendingGestureContext'
15
16
import {atoms as a, useGutters, useTheme} from '#/alf'
16
17
import {Button, ButtonIcon} from '#/components/Button'
17
18
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
···
40
41
setTrendingDisabled(true)
41
42
}, [setTrendingDisabled])
42
43
44
+
// This is coordinated to take precedence over the drawer pan gesture.
45
+
const trendingScrollGesture = useContext(TrendingGestureContext)
46
+
43
47
return error || noTopics ? null : (
44
48
<View style={[t.atoms.border_contrast_low, a.border_t]}>
45
-
<ScrollView
46
-
horizontal
47
-
showsHorizontalScrollIndicator={false}
48
-
decelerationRate="fast">
49
-
<View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
50
-
<View style={{paddingLeft: 4, paddingRight: 2}}>
51
-
<Graph size="sm" />
52
-
</View>
53
-
{isLoading ? (
54
-
<View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
55
-
<LoadingPlaceholder
56
-
width={80}
57
-
height={undefined}
58
-
style={{alignSelf: 'stretch'}}
59
-
/>
60
-
<LoadingPlaceholder
61
-
width={50}
62
-
height={undefined}
63
-
style={{alignSelf: 'stretch'}}
64
-
/>
65
-
<LoadingPlaceholder
66
-
width={120}
67
-
height={undefined}
68
-
style={{alignSelf: 'stretch'}}
69
-
/>
70
-
<LoadingPlaceholder
71
-
width={30}
72
-
height={undefined}
73
-
style={{alignSelf: 'stretch'}}
74
-
/>
75
-
<LoadingPlaceholder
76
-
width={180}
77
-
height={undefined}
78
-
style={{alignSelf: 'stretch'}}
79
-
/>
80
-
<Text
81
-
style={[t.atoms.text_contrast_medium, a.text_sm, a.font_bold]}>
82
-
{' '}
83
-
</Text>
49
+
<GestureDetector gesture={trendingScrollGesture}>
50
+
<ScrollView
51
+
horizontal
52
+
showsHorizontalScrollIndicator={false}
53
+
decelerationRate="fast">
54
+
<View style={[gutters, a.flex_row, a.align_center, a.gap_lg]}>
55
+
<View style={{paddingLeft: 4, paddingRight: 2}}>
56
+
<Graph size="sm" />
84
57
</View>
85
-
) : !trending?.topics ? null : (
86
-
<>
87
-
{trending.topics.map(topic => (
88
-
<TrendingTopicLink
89
-
key={topic.link}
90
-
topic={topic}
91
-
onPress={() => {
92
-
logEvent('trendingTopic:click', {context: 'interstitial'})
93
-
}}>
94
-
<View style={[a.py_lg]}>
95
-
<Text
96
-
style={[
97
-
t.atoms.text,
98
-
a.text_sm,
99
-
a.font_bold,
100
-
{opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
101
-
]}>
102
-
{topic.topic}
103
-
</Text>
104
-
</View>
105
-
</TrendingTopicLink>
106
-
))}
107
-
<Button
108
-
label={_(msg`Hide trending topics`)}
109
-
size="tiny"
110
-
variant="ghost"
111
-
color="secondary"
112
-
shape="round"
113
-
onPress={() => trendingPrompt.open()}>
114
-
<ButtonIcon icon={X} />
115
-
</Button>
116
-
</>
117
-
)}
118
-
</View>
119
-
</ScrollView>
58
+
{isLoading ? (
59
+
<View style={[a.py_lg, a.flex_row, a.gap_lg, a.align_center]}>
60
+
<LoadingPlaceholder
61
+
width={80}
62
+
height={undefined}
63
+
style={{alignSelf: 'stretch'}}
64
+
/>
65
+
<LoadingPlaceholder
66
+
width={50}
67
+
height={undefined}
68
+
style={{alignSelf: 'stretch'}}
69
+
/>
70
+
<LoadingPlaceholder
71
+
width={120}
72
+
height={undefined}
73
+
style={{alignSelf: 'stretch'}}
74
+
/>
75
+
<LoadingPlaceholder
76
+
width={30}
77
+
height={undefined}
78
+
style={{alignSelf: 'stretch'}}
79
+
/>
80
+
<LoadingPlaceholder
81
+
width={180}
82
+
height={undefined}
83
+
style={{alignSelf: 'stretch'}}
84
+
/>
85
+
<Text
86
+
style={[
87
+
t.atoms.text_contrast_medium,
88
+
a.text_sm,
89
+
a.font_bold,
90
+
]}>
91
+
{' '}
92
+
</Text>
93
+
</View>
94
+
) : !trending?.topics ? null : (
95
+
<>
96
+
{trending.topics.map(topic => (
97
+
<TrendingTopicLink
98
+
key={topic.link}
99
+
topic={topic}
100
+
onPress={() => {
101
+
logEvent('trendingTopic:click', {context: 'interstitial'})
102
+
}}>
103
+
<View style={[a.py_lg]}>
104
+
<Text
105
+
style={[
106
+
t.atoms.text,
107
+
a.text_sm,
108
+
a.font_bold,
109
+
{opacity: 0.7}, // NOTE: we use opacity 0.7 instead of a color to match the color of the home pager tab bar
110
+
]}>
111
+
{topic.topic}
112
+
</Text>
113
+
</View>
114
+
</TrendingTopicLink>
115
+
))}
116
+
<Button
117
+
label={_(msg`Hide trending topics`)}
118
+
size="tiny"
119
+
variant="ghost"
120
+
color="secondary"
121
+
shape="round"
122
+
onPress={() => trendingPrompt.open()}>
123
+
<ButtonIcon icon={X} />
124
+
</Button>
125
+
</>
126
+
)}
127
+
</View>
128
+
</ScrollView>
129
+
</GestureDetector>
120
130
121
131
<Prompt.Basic
122
132
control={trendingPrompt}
+7
src/view/shell/TrendingGestureContext.tsx
+7
src/view/shell/TrendingGestureContext.tsx
+11
-2
src/view/shell/index.tsx
+11
-2
src/view/shell/index.tsx
···
1
-
import {useCallback, useEffect} from 'react'
1
+
import {useCallback, useEffect, useState} from 'react'
2
2
import {BackHandler, useWindowDimensions, View} from 'react-native'
3
3
import {Drawer} from 'react-native-drawer-layout'
4
+
import {Gesture} from 'react-native-gesture-handler'
4
5
import {useSafeAreaInsets} from 'react-native-safe-area-context'
5
6
import {StatusBar} from 'expo-status-bar'
6
7
import {useNavigation, useNavigationState} from '@react-navigation/native'
···
33
34
import {updateActiveViewAsync} from '../../../modules/expo-bluesky-swiss-army/src/VisibilityView'
34
35
import {Composer} from './Composer'
35
36
import {DrawerContent} from './Drawer'
37
+
import {TrendingGestureContext} from './TrendingGestureContext'
36
38
37
39
function ShellInner() {
38
40
const t = useTheme()
···
92
94
}, [dedupe, navigation])
93
95
94
96
const swipeEnabled = !canGoBack && hasSession && !isDrawerSwipeDisabled
97
+
const [trendingScrollGesture] = useState(() => Gesture.Native())
95
98
return (
96
99
<>
97
100
<View style={[a.h_full]}>
···
101
104
renderDrawerContent={renderDrawerContent}
102
105
drawerStyle={{width: Math.min(400, winDim.width * 0.8)}}
103
106
configureGestureHandler={handler => {
107
+
handler = handler.requireExternalGestureToFail(
108
+
trendingScrollGesture,
109
+
)
110
+
104
111
if (swipeEnabled) {
105
112
if (isDrawerOpen) {
106
113
return handler.activeOffsetX([-1, 1])
···
138
145
dim: 'rgba(10, 13, 16, 0.8)',
139
146
}),
140
147
}}>
141
-
<TabsNavigator />
148
+
<TrendingGestureContext.Provider value={trendingScrollGesture}>
149
+
<TabsNavigator />
150
+
</TrendingGestureContext.Provider>
142
151
</Drawer>
143
152
</ErrorBoundary>
144
153
</View>