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

user_10864356 0
Viewed 560

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 react-native@0.62.0
touchableopacity react-native-debugger react-native reactjs
1 Answers

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).

user_17201990
Related