forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Remove `FixedTouchableHighlight` , fix Android press issues (#3214)
* rm `FixedTouchableHighlight`
* adjust delay for highlight
* remove unnecessary background colors to support background ripple
+11
-76
-1
src/view/com/notifications/FeedItem.tsx
-1
src/view/com/notifications/FeedItem.tsx
-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
-
}
-3
src/view/com/post-thread/PostThreadItem.tsx
-3
src/view/com/post-thread/PostThreadItem.tsx
···
432
432
<PostHider
433
433
testID={`postThreadItem-by-${post.author.handle}`}
434
434
href={postHref}
435
-
style={[pal.view]}
436
435
moderation={moderation.content}
437
436
iconSize={isThreadedChild ? 26 : 38}
438
437
iconStyles={
···
622
621
return (
623
622
<View
624
623
style={[
625
-
pal.view,
626
624
pal.border,
627
625
styles.cursor,
628
626
{
···
650
648
<View
651
649
style={[
652
650
styles.outer,
653
-
pal.view,
654
651
pal.border,
655
652
showParentReplyLine && hasPrecedingItem && styles.noTopBorder,
656
653
styles.cursor,
+1
-1
src/view/com/post/Post.tsx
+1
-1
src/view/com/post/Post.tsx
···
133
133
}, [setLimitLines])
134
134
135
135
return (
136
-
<Link href={itemHref} style={[styles.outer, pal.view, pal.border, style]}>
136
+
<Link href={itemHref} style={[styles.outer, pal.border, style]}>
137
137
{showReplyLine && <View style={styles.replyLine} />}
138
138
<View style={styles.layout}>
139
139
<View style={styles.layoutAvi}>
-1
src/view/com/posts/FeedItem.tsx
-1
src/view/com/posts/FeedItem.tsx
+1
-5
src/view/com/posts/FeedSlice.tsx
+1
-5
src/view/com/posts/FeedSlice.tsx
···
78
78
}, [slice.rootUri])
79
79
80
80
return (
81
-
<Link
82
-
style={[pal.view, styles.viewFullThread]}
83
-
href={itemHref}
84
-
asAnchor
85
-
noFeedback>
81
+
<Link style={[styles.viewFullThread]} href={itemHref} asAnchor noFeedback>
86
82
<View style={styles.viewFullThreadDots}>
87
83
<Svg width="4" height="40">
88
84
<Line
+9
-23
src/view/com/util/Link.tsx
+9
-23
src/view/com/util/Link.tsx
···
8
8
View,
9
9
ViewStyle,
10
10
Pressable,
11
-
TouchableWithoutFeedback,
12
11
TouchableOpacity,
13
12
} from 'react-native'
14
13
import {useLinkProps, StackActions} from '@react-navigation/native'
···
23
22
import {isAndroid, isWeb} from 'platform/detection'
24
23
import {sanitizeUrl} from '@braintree/sanitize-url'
25
24
import {PressableWithHover} from './PressableWithHover'
26
-
import FixedTouchableHighlight from '../pager/FixedTouchableHighlight'
27
25
import {useModalControls} from '#/state/modals'
28
26
import {useOpenLink} from '#/state/preferences/in-app-browser'
29
27
import {WebAuxClickWrapper} from 'view/com/util/WebAuxClickWrapper'
···
31
29
DebouncedNavigationProp,
32
30
useNavigationDeduped,
33
31
} from 'lib/hooks/useNavigationDeduped'
32
+
import {useTheme} from '#/alf'
34
33
35
34
type Event =
36
35
| React.MouseEvent<HTMLAnchorElement, MouseEvent>
···
63
62
navigationAction,
64
63
...props
65
64
}: Props) {
65
+
const t = useTheme()
66
66
const {closeModal} = useModalControls()
67
67
const navigation = useNavigationDeduped()
68
68
const anchorHref = asAnchor ? sanitizeUrl(href) : undefined
···
85
85
)
86
86
87
87
if (noFeedback) {
88
-
if (isAndroid) {
89
-
// workaround for Android not working well with left/right swipe gestures and TouchableWithoutFeedback
90
-
// https://github.com/callstack/react-native-pager-view/issues/424
91
-
return (
92
-
<FixedTouchableHighlight
93
-
testID={testID}
94
-
onPress={onPress}
95
-
// @ts-ignore web only -prf
96
-
href={asAnchor ? sanitizeUrl(href) : undefined}
97
-
accessible={accessible}
98
-
accessibilityRole="link"
99
-
{...props}>
100
-
<View style={style}>
101
-
{children ? children : <Text>{title || 'link'}</Text>}
102
-
</View>
103
-
</FixedTouchableHighlight>
104
-
)
105
-
}
106
88
return (
107
89
<WebAuxClickWrapper>
108
-
<TouchableWithoutFeedback
90
+
<Pressable
109
91
testID={testID}
110
92
onPress={onPress}
111
93
accessible={accessible}
112
94
accessibilityRole="link"
113
-
{...props}>
95
+
{...props}
96
+
android_ripple={{
97
+
color: t.atoms.bg_contrast_25.backgroundColor,
98
+
}}
99
+
unstable_pressDelay={isAndroid ? 90 : undefined}>
114
100
{/* @ts-ignore web only -prf */}
115
101
<View style={style} href={anchorHref}>
116
102
{children ? children : <Text>{title || 'link'}</Text>}
117
103
</View>
118
-
</TouchableWithoutFeedback>
104
+
</Pressable>
119
105
</WebAuxClickWrapper>
120
106
)
121
107
}