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
- Use TouchableOpacity from RNGH in 1.9.0, note how it works
- 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)
@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
-basedtabBarButton
to a React Navigation BottomTabBar on Android. Since 1.10.0 it looked like this. (They were also not clickable, I have to add).But thanks to #1351 it looks the way it’s supposed to again:
Thx very much for the quick fix @jakub-gonet