forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Fix tabbar swipe conflicting with drawer (#7501)
+51
-48
+51
-48
src/view/com/pager/TabBar.tsx
+51
-48
src/view/com/pager/TabBar.tsx
···
13
13
} from 'react-native-reanimated'
14
14
15
15
import {PressableWithHover} from '#/view/com/util/PressableWithHover'
16
+
import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture'
16
17
import {atoms as a, useTheme} from '#/alf'
17
18
import {Text} from '#/components/Typography'
18
19
···
297
298
testID={testID}
298
299
style={[t.atoms.bg, a.flex_row]}
299
300
accessibilityRole="tablist">
300
-
<ScrollView
301
-
testID={`${testID}-selector`}
302
-
horizontal={true}
303
-
showsHorizontalScrollIndicator={false}
304
-
ref={scrollElRef}
305
-
contentContainerStyle={styles.contentContainer}
306
-
onLayout={e => {
307
-
containerSize.set(e.nativeEvent.layout.width)
308
-
}}
309
-
onScrollBeginDrag={() => {
310
-
// Remember that you've manually messed with the tabbar scroll.
311
-
// This will disable auto-adjustment until after next pager swipe or item tap.
312
-
syncScrollState.set('unsynced')
313
-
}}
314
-
onScroll={e => {
315
-
scrollX.value = Math.round(e.nativeEvent.contentOffset.x)
316
-
}}>
317
-
<Animated.View
301
+
<BlockDrawerGesture>
302
+
<ScrollView
303
+
testID={`${testID}-selector`}
304
+
horizontal={true}
305
+
showsHorizontalScrollIndicator={false}
306
+
ref={scrollElRef}
307
+
contentContainerStyle={styles.contentContainer}
318
308
onLayout={e => {
319
-
contentSize.set(e.nativeEvent.layout.width)
309
+
containerSize.set(e.nativeEvent.layout.width)
320
310
}}
321
-
style={{flexDirection: 'row', flexGrow: 1}}>
322
-
{items.map((item, i) => {
323
-
return (
324
-
<TabBarItem
325
-
key={i}
326
-
index={i}
327
-
testID={testID}
328
-
dragProgress={dragProgress}
329
-
item={item}
330
-
onPressItem={onPressItem}
331
-
onItemLayout={onItemLayout}
332
-
onTextLayout={onTextLayout}
333
-
/>
334
-
)
335
-
})}
311
+
onScrollBeginDrag={() => {
312
+
// Remember that you've manually messed with the tabbar scroll.
313
+
// This will disable auto-adjustment until after next pager swipe or item tap.
314
+
syncScrollState.set('unsynced')
315
+
}}
316
+
onScroll={e => {
317
+
scrollX.value = Math.round(e.nativeEvent.contentOffset.x)
318
+
}}>
336
319
<Animated.View
337
-
style={[
338
-
indicatorStyle,
339
-
{
340
-
position: 'absolute',
341
-
left: 0,
342
-
bottom: 0,
343
-
right: 0,
344
-
borderBottomWidth: 2,
345
-
borderColor: t.palette.primary_500,
346
-
},
347
-
]}
348
-
/>
349
-
</Animated.View>
350
-
</ScrollView>
320
+
onLayout={e => {
321
+
contentSize.set(e.nativeEvent.layout.width)
322
+
}}
323
+
style={{flexDirection: 'row', flexGrow: 1}}>
324
+
{items.map((item, i) => {
325
+
return (
326
+
<TabBarItem
327
+
key={i}
328
+
index={i}
329
+
testID={testID}
330
+
dragProgress={dragProgress}
331
+
item={item}
332
+
onPressItem={onPressItem}
333
+
onItemLayout={onItemLayout}
334
+
onTextLayout={onTextLayout}
335
+
/>
336
+
)
337
+
})}
338
+
<Animated.View
339
+
style={[
340
+
indicatorStyle,
341
+
{
342
+
position: 'absolute',
343
+
left: 0,
344
+
bottom: 0,
345
+
right: 0,
346
+
borderBottomWidth: 2,
347
+
borderColor: t.palette.primary_500,
348
+
},
349
+
]}
350
+
/>
351
+
</Animated.View>
352
+
</ScrollView>
353
+
</BlockDrawerGesture>
351
354
<View style={[t.atoms.border_contrast_low, styles.outerBottomBorder]} />
352
355
</View>
353
356
)