question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Native Touchable* not working anymore (1.10.0)

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:15 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
mrousavycommented, Feb 10, 2021

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

2reactions
jakub-gonetcommented, Feb 11, 2021

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

React native TouchableOpacity onPress not working on Android
In some cases, the native debugger does not work properly on iOS and Android platforms and I found that TouchableOpacity has touch bugs...
Read more >
react-native-gesture-handler - npm
React Native Gesture Handler provides native-driven gesture management APIs for building best possible touch-based experiences in React Native.
Read more >
Changelog — Kivy 2.1.0 documentation
1 (June 20, 2019)¶. This release fixed some issues with the docs, the CI, and Kivy dependencies that was introduced in 1.11.0 (#6357)....
Read more >
Touchables | React Native Gesture Handler - Software Mansion
Gesture Handler's TouchableOpacity uses native driver for animations by default. If this causes problems for you, you can set useNativeAnimations prop to false....
Read more >
prevent touch parent on children view react native - You.com
The issue is that Touchable*#onPress doesn't work on iOS devices with 3D Touch, if any pressure is applied, when the component wrapped by...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found