Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

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

[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

authored by

Ansh and committed by
GitHub
df755213 bf178576

+74 -9
+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
··· 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
··· 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 }