react-native-gesture-handler: Native Touchable* not working anymore (1.10.0)

Description

Since the 1.10.0 upgrade the Touchable* components are not working anymore on Android, meaning they don’t switch states, don’t show visual feedback, and don’t call onPress events.

Everything is working as expected on iOS.

Screenshots

Steps To Reproduce

  1. Use TouchableOpacity from RNGH in 1.9.0, note how it works
  2. Use TouchableOpacity from RNGH in 1.10.0, note how it doesn’t work anymore

Expected behavior

I expect it to work.

Actual behavior

It doesn’t work.

Snack or minimal code example

import React from "react";
import "react-native-gesture-handler";
import { Text, View } from "react-native";
import { Navigation } from "react-native-navigation";
import { PressableOpacity } from "./src/common/components/pressables/PressableOpacity"; // <-- that's a RN <Pressable> with opacity effect
import {
  gestureHandlerRootHOC,
  TouchableOpacity,
} from "react-native-gesture-handler";

const App = () => {
  console.log("Re-rendering App...");
  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <Text>Hello world!</Text>
      <PressableOpacity
        style={{ width: 100, height: 50, backgroundColor: "blue" }}
        onPress={() => console.log("js")}
      />
      <TouchableOpacity
        disabled={false}
        style={{ width: 100, height: 50, backgroundColor: "red" }}
        onPress={() => console.log("rngh")}
      />
    </View>
  );
};

Navigation.registerComponent(
  "Home",
  () => gestureHandlerRootHOC(App),
  () => App
);

Navigation.setRoot({
  root: {
    component: {
      name: "Home",
    },
  },
});

Package versions

  • React: 17.0.1
  • React Native: 0.64.0-rc.3
  • React Native Gesture Handler: 1.10.0

About this issue

  • Original URL
  • State: closed
  • Created 3 years ago
  • Comments: 15 (10 by maintainers)

Most upvoted comments

@jakub-gonet I’m on react-native-navigation and I’m assuming the others are too, so it has to be a problem with the gesture handler root HoC. I’ll see if I can find some time later to maybe test if it works without react-native-navigation (so without the HoC)

You can check if changes from #1351 improve the situation for you.

I had a similar problem, where I provide a custom RNGH TouchableNativeFeedback-based tabBarButton to a React Navigation BottomTabBar on Android. Since 1.10.0 it looked like this. (They were also not clickable, I have to add). Screenshot_1613120208

But thanks to #1351 it looks the way it’s supposed to again: Screenshot_1613120056

Thx very much for the quick fix @jakub-gonet