react-nativemobilewix-react-native-navigation

Android - Got DOWN touch before receiving UP or CANCEL from last gesture


Thanks for taking a look into this issue.

I'm working on upgrading a project's React native version from 0.66.4 to 0.72.4 and I'm finding an issue with React Native Navigation, particularly the back button in the top bar. Whenever I click on it, I get Got DOWN touch before receiving UP or CANCEL from last gesture in the adb logcat, while no error is raised in the debugger or the console.

After some investigation, I see this is related to the RNN Overlays functionality since I have one button intended to overlay the rest of the application, however, it is set as interceptTouchOutside: false so it shouldn't prevent the rest of the application to be clicked. If I remove the overlay (commenting showOverlay), the back button works, so it appears something is not resolving from it.

This only affects the back button in the topbar, the rest of the application is clickable and works as expected. The hardwareBackButton is also working so there's nothing wrong with the stack.

I tried different versions of RNN, we were coming from 7.1.0, tried 7.22.0 and finally the latest 7.37.0, and all of them have the same issue. Please note it was working with React Native 0.66.4 and React Native Navigation 7.1.0

This is how I'm resolving the showOverlay function:
promise.then(() => Navigation.showOverlay(addIdeaOverlay)).then(() => dashboardActionButtonVisible = true)
promise is just another promise that is being resolved

I'm not using the new Architecture, neither Hermes.

I know an upgrade process can bring lots of unexpected issues, but this one is quite obscure since I'm not getting any log error aside from the logcat one, and that's when I try to click. I must certainly be missing something, does anyone know a way to fix this?

Thank you all!


Solution

  • After some investigation, we found that our issue was caused by using an Action Button (From this library here: https://github.com/mastermoo/react-native-action-button) inside a View component. For some reason, being inside a view blocked the Action button, and the back button at the topbar (as if positioning didn't take effect), when calling the component inside the React Native Navigation showOverlay function.

    We moved the implementation to use the Action Button outside of the Overlay function, below each screen, and that solved the problem. That is the way the button was originally intended to be used.

    Positioning works differently in React Native, so I feel that may be related to why it was unclickable inside the screen but was clickable when on top of the top bar.