forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[APP-703] Android horizontal scroll registers as tap (#960)
* use Touchables from react-native-gesture-handler
* upgrade `react-native-gesture-handler` to latest version
* add FixedTouchableHighlight for android
* add workaround comment
* wait for animations to complete before loading data
* downgrade RNGH back to the version we had
+74
-9
+42
src/view/com/pager/FixedTouchableHighlight.tsx
+42
src/view/com/pager/FixedTouchableHighlight.tsx
···
1
+
// FixedTouchableHighlight.tsx
2
+
import React, {ComponentProps, useRef} from 'react'
3
+
import {GestureResponderEvent, TouchableHighlight} from 'react-native'
4
+
5
+
type Position = {pageX: number; pageY: number}
6
+
7
+
export default function FixedTouchableHighlight({
8
+
onPress,
9
+
onPressIn,
10
+
...props
11
+
}: ComponentProps<typeof TouchableHighlight>) {
12
+
const _touchActivatePositionRef = useRef<Position | null>(null)
13
+
14
+
function _onPressIn(e: GestureResponderEvent) {
15
+
const {pageX, pageY} = e.nativeEvent
16
+
17
+
_touchActivatePositionRef.current = {
18
+
pageX,
19
+
pageY,
20
+
}
21
+
22
+
onPressIn?.(e)
23
+
}
24
+
25
+
function _onPress(e: GestureResponderEvent) {
26
+
const {pageX, pageY} = e.nativeEvent
27
+
28
+
const absX = Math.abs(_touchActivatePositionRef.current?.pageX! - pageX)
29
+
const absY = Math.abs(_touchActivatePositionRef.current?.pageY! - pageY)
30
+
31
+
const dragged = absX > 2 || absY > 2
32
+
if (!dragged) {
33
+
onPress?.(e)
34
+
}
35
+
}
36
+
37
+
return (
38
+
<TouchableHighlight onPressIn={_onPressIn} onPress={_onPress} {...props}>
39
+
{props.children}
40
+
</TouchableHighlight>
41
+
)
42
+
}
+22
-3
src/view/com/util/Link.tsx
+22
-3
src/view/com/util/Link.tsx
···
5
5
GestureResponderEvent,
6
6
Platform,
7
7
StyleProp,
8
-
TouchableWithoutFeedback,
9
-
TouchableOpacity,
10
8
TextStyle,
11
9
View,
12
10
ViewStyle,
11
+
TouchableOpacity,
12
+
TouchableWithoutFeedback,
13
13
} from 'react-native'
14
14
import {
15
15
useLinkProps,
···
22
22
import {router} from '../../../routes'
23
23
import {useStores, RootStoreModel} from 'state/index'
24
24
import {convertBskyAppUrlIfNeeded, isExternalUrl} from 'lib/strings/url-helpers'
25
-
import {isDesktopWeb} from 'platform/detection'
25
+
import {isAndroid, isDesktopWeb} from 'platform/detection'
26
26
import {sanitizeUrl} from '@braintree/sanitize-url'
27
+
import FixedTouchableHighlight from '../pager/FixedTouchableHighlight'
27
28
28
29
type Event =
29
30
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
···
65
66
)
66
67
67
68
if (noFeedback) {
69
+
if (isAndroid) {
70
+
// workaround for Android not working well with left/right swipe gestures and TouchableWithoutFeedback
71
+
// https://github.com/callstack/react-native-pager-view/issues/424
72
+
return (
73
+
<FixedTouchableHighlight
74
+
testID={testID}
75
+
onPress={onPress}
76
+
// @ts-ignore web only -prf
77
+
href={asAnchor ? sanitizeUrl(href) : undefined}
78
+
accessible={accessible}
79
+
accessibilityRole="link"
80
+
{...props}>
81
+
<View style={style}>
82
+
{children ? children : <Text>{title || 'link'}</Text>}
83
+
</View>
84
+
</FixedTouchableHighlight>
85
+
)
86
+
}
68
87
return (
69
88
<TouchableWithoutFeedback
70
89
testID={testID}
+10
-6
src/view/screens/PostThread.tsx
+10
-6
src/view/screens/PostThread.tsx
···
1
1
import React, {useMemo} from 'react'
2
-
import {StyleSheet, View} from 'react-native'
2
+
import {InteractionManager, StyleSheet, View} from 'react-native'
3
3
import {useFocusEffect} from '@react-navigation/native'
4
4
import {NativeStackScreenProps, CommonNavigatorParams} from 'lib/routes/types'
5
5
import {makeRecordUri} from 'lib/strings/url-helpers'
···
31
31
React.useCallback(() => {
32
32
store.shell.setMinimalShellMode(false)
33
33
const threadCleanup = view.registerListeners()
34
-
if (!view.hasLoaded && !view.isLoading) {
35
-
view.setup().catch(err => {
36
-
store.log.error('Failed to fetch thread', err)
37
-
})
38
-
}
34
+
35
+
InteractionManager.runAfterInteractions(() => {
36
+
if (!view.hasLoaded && !view.isLoading) {
37
+
view.setup().catch(err => {
38
+
store.log.error('Failed to fetch thread', err)
39
+
})
40
+
}
41
+
})
42
+
39
43
return () => {
40
44
threadCleanup()
41
45
}