diff --git a/src/view/com/pager/FixedTouchableHighlight.tsx b/src/view/com/pager/FixedTouchableHighlight.tsx new file mode 100644 index 0000000000..d071969757 --- /dev/null +++ b/src/view/com/pager/FixedTouchableHighlight.tsx @@ -0,0 +1,42 @@ +// FixedTouchableHighlight.tsx +import React, {ComponentProps, useRef} from 'react' +import {GestureResponderEvent, TouchableHighlight} from 'react-native' + +type Position = {pageX: number; pageY: number} + +export default function FixedTouchableHighlight({ + onPress, + onPressIn, + ...props +}: ComponentProps) { + const _touchActivatePositionRef = useRef(null) + + function _onPressIn(e: GestureResponderEvent) { + const {pageX, pageY} = e.nativeEvent + + _touchActivatePositionRef.current = { + pageX, + pageY, + } + + onPressIn?.(e) + } + + function _onPress(e: GestureResponderEvent) { + const {pageX, pageY} = e.nativeEvent + + const absX = Math.abs(_touchActivatePositionRef.current?.pageX! - pageX) + const absY = Math.abs(_touchActivatePositionRef.current?.pageY! - pageY) + + const dragged = absX > 2 || absY > 2 + if (!dragged) { + onPress?.(e) + } + } + + return ( + + {props.children} + + ) +} diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx index 7ff896344e..1dec97e78d 100644 --- a/src/view/com/util/Link.tsx +++ b/src/view/com/util/Link.tsx @@ -5,11 +5,11 @@ import { GestureResponderEvent, Platform, StyleProp, - TouchableWithoutFeedback, - TouchableOpacity, TextStyle, View, ViewStyle, + TouchableOpacity, + TouchableWithoutFeedback, } from 'react-native' import { useLinkProps, @@ -22,8 +22,9 @@ import {NavigationProp} from 'lib/routes/types' import {router} from '../../../routes' import {useStores, RootStoreModel} from 'state/index' import {convertBskyAppUrlIfNeeded, isExternalUrl} from 'lib/strings/url-helpers' -import {isDesktopWeb} from 'platform/detection' +import {isAndroid, isDesktopWeb} from 'platform/detection' import {sanitizeUrl} from '@braintree/sanitize-url' +import FixedTouchableHighlight from '../pager/FixedTouchableHighlight' type Event = | React.MouseEvent @@ -65,6 +66,24 @@ export const Link = observer(function Link({ ) if (noFeedback) { + if (isAndroid) { + // workaround for Android not working well with left/right swipe gestures and TouchableWithoutFeedback + // https://github.com/callstack/react-native-pager-view/issues/424 + return ( + + + {children ? children : {title || 'link'}} + + + ) + } return ( { React.useCallback(() => { store.shell.setMinimalShellMode(false) const threadCleanup = view.registerListeners() - if (!view.hasLoaded && !view.isLoading) { - view.setup().catch(err => { - store.log.error('Failed to fetch thread', err) - }) - } + + InteractionManager.runAfterInteractions(() => { + if (!view.hasLoaded && !view.isLoading) { + view.setup().catch(err => { + store.log.error('Failed to fetch thread', err) + }) + } + }) + return () => { threadCleanup() }