this repo has no description
Prevent Drawer gesture conflicting with Suggestions scroll (#7468)
* Extract BlockDrawerGeesture
* Block drawer when scrolling interstitials
+72
-60
+59
-51
src/components/FeedInterstitials.tsx
+59
-51
src/components/FeedInterstitials.tsx
···
1
1
import React from 'react'
2
-
import {View} from 'react-native'
3
-
import {ScrollView} from 'react-native-gesture-handler'
2
+
import {ScrollView, View} from 'react-native'
4
3
import {AppBskyActorDefs, AppBskyFeedDefs, AtUri} from '@atproto/api'
5
4
import {msg, Trans} from '@lingui/macro'
6
5
import {useLingui} from '@lingui/react'
···
17
16
import {useSession} from '#/state/session'
18
17
import * as userActionHistory from '#/state/userActionHistory'
19
18
import {SeenPost} from '#/state/userActionHistory'
19
+
import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
20
20
import {atoms as a, useBreakpoints, useTheme, ViewStyleProp, web} from '#/alf'
21
21
import {Button} from '#/components/Button'
22
22
import * as FeedCard from '#/components/FeedCard'
···
336
336
</View>
337
337
</View>
338
338
) : (
339
-
<ScrollView
340
-
horizontal
341
-
showsHorizontalScrollIndicator={false}
342
-
snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
343
-
decelerationRate="fast">
344
-
<View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
345
-
{content}
339
+
<BlockDrawerGesture>
340
+
<ScrollView
341
+
horizontal
342
+
showsHorizontalScrollIndicator={false}
343
+
snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
344
+
decelerationRate="fast">
345
+
<View style={[a.px_lg, a.pt_sm, a.pb_lg, a.flex_row, a.gap_md]}>
346
+
{content}
346
347
347
-
<Button
348
-
label={_(msg`Browse more accounts on the Explore page`)}
349
-
onPress={() => {
350
-
navigation.navigate('SearchTab')
351
-
}}>
352
-
<CardOuter style={[a.flex_1, {borderWidth: 0}]}>
353
-
<View style={[a.flex_1, a.justify_center]}>
354
-
<View style={[a.flex_row, a.px_lg]}>
355
-
<Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
356
-
<Trans>Browse more suggestions on the Explore page</Trans>
357
-
</Text>
348
+
<Button
349
+
label={_(msg`Browse more accounts on the Explore page`)}
350
+
onPress={() => {
351
+
navigation.navigate('SearchTab')
352
+
}}>
353
+
<CardOuter style={[a.flex_1, {borderWidth: 0}]}>
354
+
<View style={[a.flex_1, a.justify_center]}>
355
+
<View style={[a.flex_row, a.px_lg]}>
356
+
<Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
357
+
<Trans>
358
+
Browse more suggestions on the Explore page
359
+
</Trans>
360
+
</Text>
358
361
359
-
<Arrow size="xl" />
362
+
<Arrow size="xl" />
363
+
</View>
360
364
</View>
361
-
</View>
362
-
</CardOuter>
363
-
</Button>
364
-
</View>
365
-
</ScrollView>
365
+
</CardOuter>
366
+
</Button>
367
+
</View>
368
+
</ScrollView>
369
+
</BlockDrawerGesture>
366
370
)}
367
371
</View>
368
372
)
···
469
473
</View>
470
474
</View>
471
475
) : (
472
-
<ScrollView
473
-
horizontal
474
-
showsHorizontalScrollIndicator={false}
475
-
snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
476
-
decelerationRate="fast">
477
-
<View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
478
-
{content}
476
+
<BlockDrawerGesture>
477
+
<ScrollView
478
+
horizontal
479
+
showsHorizontalScrollIndicator={false}
480
+
snapToInterval={MOBILE_CARD_WIDTH + a.gap_md.gap}
481
+
decelerationRate="fast">
482
+
<View style={[a.px_lg, a.pt_md, a.pb_xl, a.flex_row, a.gap_md]}>
483
+
{content}
479
484
480
-
<Button
481
-
label={_(msg`Browse more feeds on the Explore page`)}
482
-
onPress={() => {
483
-
navigation.navigate('SearchTab')
484
-
}}
485
-
style={[a.flex_col]}>
486
-
<CardOuter style={[a.flex_1]}>
487
-
<View style={[a.flex_1, a.justify_center]}>
488
-
<View style={[a.flex_row, a.px_lg]}>
489
-
<Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
490
-
<Trans>Browse more suggestions on the Explore page</Trans>
491
-
</Text>
485
+
<Button
486
+
label={_(msg`Browse more feeds on the Explore page`)}
487
+
onPress={() => {
488
+
navigation.navigate('SearchTab')
489
+
}}
490
+
style={[a.flex_col]}>
491
+
<CardOuter style={[a.flex_1]}>
492
+
<View style={[a.flex_1, a.justify_center]}>
493
+
<View style={[a.flex_row, a.px_lg]}>
494
+
<Text style={[a.pr_xl, a.flex_1, a.leading_snug]}>
495
+
<Trans>
496
+
Browse more suggestions on the Explore page
497
+
</Trans>
498
+
</Text>
492
499
493
-
<Arrow size="xl" />
500
+
<Arrow size="xl" />
501
+
</View>
494
502
</View>
495
-
</View>
496
-
</CardOuter>
497
-
</Button>
498
-
</View>
499
-
</ScrollView>
503
+
</CardOuter>
504
+
</Button>
505
+
</View>
506
+
</ScrollView>
507
+
</BlockDrawerGesture>
500
508
)}
501
509
</View>
502
510
)
+4
-9
src/components/interstitials/Trending.tsx
+4
-9
src/components/interstitials/Trending.tsx
···
1
-
import React, {useContext} from 'react'
1
+
import React from 'react'
2
2
import {ScrollView, View} from 'react-native'
3
-
import {DrawerGestureContext} from 'react-native-drawer-layout'
4
-
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
5
3
import {msg} from '@lingui/macro'
6
4
import {useLingui} from '@lingui/react'
7
5
···
13
11
import {useTrendingTopics} from '#/state/queries/trending/useTrendingTopics'
14
12
import {useTrendingConfig} from '#/state/trending-config'
15
13
import {LoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
14
+
import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
16
15
import {atoms as a, useGutters, useTheme} from '#/alf'
17
16
import {Button, ButtonIcon} from '#/components/Button'
18
17
import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
···
41
40
setTrendingDisabled(true)
42
41
}, [setTrendingDisabled])
43
42
44
-
const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web
45
-
const trendingScrollGesture =
46
-
Gesture.Native().blocksExternalGesture(drawerGesture)
47
-
48
43
return error || noTopics ? null : (
49
44
<View style={[t.atoms.border_contrast_low, a.border_t]}>
50
-
<GestureDetector gesture={trendingScrollGesture}>
45
+
<BlockDrawerGesture>
51
46
<ScrollView
52
47
horizontal
53
48
showsHorizontalScrollIndicator={false}
···
127
122
)}
128
123
</View>
129
124
</ScrollView>
130
-
</GestureDetector>
125
+
</BlockDrawerGesture>
131
126
132
127
<Prompt.Basic
133
128
control={trendingPrompt}
+9
src/view/shell/BlockDrawerGesture.tsx
+9
src/view/shell/BlockDrawerGesture.tsx
···
1
+
import {useContext} from 'react'
2
+
import {DrawerGestureContext} from 'react-native-drawer-layout'
3
+
import {Gesture, GestureDetector} from 'react-native-gesture-handler'
4
+
5
+
export function BlockDrawerGesture({children}: {children: React.ReactNode}) {
6
+
const drawerGesture = useContext(DrawerGestureContext) ?? Gesture.Native() // noop for web
7
+
const scrollGesture = Gesture.Native().blocksExternalGesture(drawerGesture)
8
+
return <GestureDetector gesture={scrollGesture}>{children}</GestureDetector>
9
+
}