React Native <TouchableOpacity> callback not called on Android when debug mode is on

Question

I have <TouchableOpacity> components in my React Native app that all have associated callbacks. These work fine on iOS, and fine on Android if I don't have the device set to debug. But when I do have it set to debug, the elements do change opacity when clicked, but the callbacks aren't called.

Does anyone know how I can approach this?

Notes

• This occurs when I use React Native Debugger, and when I just use the default debugger that appears in Chrome when I click debug in the developer options.
• This problem does NOT happen for emulators. It's happening for the Galaxy A30 I'm testing on.
• I'm using [email protected]

Answer 1

I can confirm that the bug exists, you can even reproduce it with this very simple example :

import React from "react";
import { TouchableOpacity, View, Text } from "react-native";

class App extends React.Component {
  render() {
    console.log("Logged in debugger.");
    return <TouchableOpacity 
      onPress={() => console.log("No log in debugger.")}>
        <View style={{height: 200, width: 200, backgroundColor: 'blue'}}>
          <Text>Test</Text>
        </View>
    </TouchableOpacity>;
  }
}

export default App;

Here is my config :

• react native 0.62.2
• react native cli 4.10.1
• react 16.13.1
• Running on a OnePlus 6T with Android 10

---

Possible solution found here on github. It seems like the problem is related to desynchronisation between debugger host time and your device time. It worked for me at least (disabling automatic time synchronisation and enabling it) but it didn't worked for a colleague (his phone is a P40 lite).