Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Remove `FixedTouchableHighlight` , fix Android press issues (#3214)

* rm `FixedTouchableHighlight`

* adjust delay for highlight

* remove unnecessary background colors to support background ripple

authored by

Hailey and committed by
GitHub
4f838167 6279c5cf

+11 -76
-1
src/view/com/notifications/FeedItem.tsx
··· 182 182 testID={`feedItem-by-${item.notification.author.handle}`} 183 183 style={[ 184 184 styles.outer, 185 - pal.view, 186 185 pal.border, 187 186 item.notification.isRead 188 187 ? undefined
-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
··· 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
··· 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
··· 144 144 145 145 const outerStyles = [ 146 146 styles.outer, 147 - pal.view, 148 147 { 149 148 borderColor: pal.colors.border, 150 149 paddingBottom:
+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
··· 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 }