Pressable stops working #3476
Description
Description
This is a really weird behavior, I've been facing it from time to time eventually - only on Android on both real devices and simulators.
I have a big and complex project, and sometimes it just stops receiving clicks on Pressable component.
Today I put some debugging on Pressable.tsx and I've found that isTouchPropagationAllowed.current is always false. The main function is:
const pressOutHandler = useCallback(
(event: PressableEvent) => {
console.log('pressOutHandler', isTouchPropagationAllowed.current)
if (!isTouchPropagationAllowed.current) {
hasPassedBoundsChecks.current = false;
isPressCallbackEnabled.current = true;
deferredEventPayload.current = null;
if (longPressTimeoutRef.current) {
clearTimeout(longPressTimeoutRef.current);
longPressTimeoutRef.current = null;
}
if (pressDelayTimeoutRef.current) {
clearTimeout(pressDelayTimeoutRef.current);
pressDelayTimeoutRef.current = null;
}
return;
}
if (
!hasPassedBoundsChecks.current ||
event.nativeEvent.touches.length >
event.nativeEvent.changedTouches.length
) {
return;
}
if (unstable_pressDelay && pressDelayTimeoutRef.current !== null) {
// When delay is preemptively finished by lifting touches,
// we want to immediately activate it's effects - pressInHandler,
// even though we are located at the pressOutHandler
clearTimeout(pressDelayTimeoutRef.current);
pressInHandler(event);
}
if (deferredEventPayload.current) {
onPressIn?.(deferredEventPayload.current);
deferredEventPayload.current = null;
}
onPressOut?.(event);
if (isPressCallbackEnabled.current) {
onPress?.(event);
}
if (longPressTimeoutRef.current) {
clearTimeout(longPressTimeoutRef.current);
longPressTimeoutRef.current = null;
}
console.log(4);
isTouchPropagationAllowed.current = false;
hasPassedBoundsChecks.current = false;
isPressCallbackEnabled.current = true;
setPressedState(false);
},
[onPress, onPressIn, onPressOut, pressInHandler, unstable_pressDelay]
);As being false its execution stops on the first condition, not firing onPress.
I couldn't reproduce it in a repro, but it is happening often on my project.
My _layout.tsx:
return (
<GestureHandlerRootView style={{flex: 1}}>
<LoaderFullscreen>
<trpc.Provider client={trpcClient} queryClient={queryClient}>
<CustomConfirmationBottomSheetModalProvider>
<CustomBottomSheetModalProvider>
<ThemeProvider value={DefaultReactNavigationTheme}>
<CustomQueryClientProvider>
<KeyboardProvider statusBarTranslucent>
<SafeAreaProvider initialMetrics={initialWindowMetrics}>
<AuthProvider>
<App />
</AuthProvider>
</SafeAreaProvider>
</KeyboardProvider>
</CustomQueryClientProvider>
</ThemeProvider>
</CustomBottomSheetModalProvider>
</CustomConfirmationBottomSheetModalProvider>
</trpc.Provider>
</LoaderFullscreen>
{toastContent}
</GestureHandlerRootView>
);As a temporary (I hope) solution, I'll have to use <GestureDetector gesture={singleTap}> on each clickable spot and handle it manually. That way it always works.
Steps to reproduce
- Just open my app and try clicking on some buttons. It doesn't happen all the time, but quite often.
Snack or a link to a repository
I couldn't reproduce it.
Gesture Handler version
2.25.0
React Native version
0.77.1
Platforms
Android
JavaScript runtime
Hermes
Workflow
Expo managed workflow
Architecture
Paper (Old Architecture)
Build type
Release mode
Device
Real device
Device model
Moto g60
Acknowledgements
Yes