-
Notifications
You must be signed in to change notification settings - Fork 1.1k
[V3] Random onPress handle in FlatList items while swiping tabs #1241
Comments
Couldn't find version numbers for the following packages in the issue:
Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3. The versions mentioned in the issue for the following packages differ from the latest versions on npm:
Can you verify that the issue still exists after upgrading to the latest versions of these packages? |
I am getting the same behaviour. When I have a I am using React Native 0.64.2 and I have the Hermes Javascript engine enabled. |
Facing the same issue on iOS and Android after upgrading to V3. Button inside flat list get pressed while swiping. |
Got the same issue. Have you fixed it? |
same issue... |
same issue |
Any update? |
Found a solution! // FixedTouchableHighlight.js
import React, { useRef } from 'react';
import { TouchableHighlight } from 'react-native';
export default function FixedTouchableHighlight({
onPress,
onPressIn,
...props
}) {
const _touchActivatePositionRef = useRef(null);
function _onPressIn(e) {
const { pageX, pageY } = e.nativeEvent;
_touchActivatePositionRef.current = {
pageX,
pageY,
};
onPressIn?.(e);
}
function _onPress(e) {
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 (
<TouchableHighlight onPressIn={_onPressIn} onPress={_onPress} {...props}>
{props.children}
</TouchableHighlight>
);
} |
Thanks, worked perfectly. In my case I wrapped TouchableOpacity and TouchableWithoutFeedback in the same way. |
Thanks!! |
Current behavior
Random onPress handle in FlatList items while swiping tabs after V3 update
Especially noticeable on low-end android devices and in apps with many heavy components
Related issue: callstack/react-native-pager-view#424
Example:
There is a function in demo that imitate CPU intensive operation
in order for the issue to be stably reproduced in simple demo on high-end devices
https://snack.expo.dev/@sane.ecg/tab-nav-onpress-issue
video_2021-08-08_01-34-54.mp4
More real world example with react navigation V6:
https://snack.expo.dev/@sane.ecg/v6-tab-nav-issue
video_2021-08-08_01-48-13.mp4
Expected behavior
No random onPress handle like in V2
video_2021-08-08_01-52-47.mp4
https://snack.expo.dev/@sane.ecg/tab-nav-v2-no-onpress-issue
Reproduction
https://snack.expo.dev/@sane.ecg/tab-nav-onpress-issue
Platform
Environment
The text was updated successfully, but these errors were encountered: