react-native TouchableNativeFeedback onPress not working - react-native

Question

I have created a composed component to compose TouchableNativeFeedback to wrapperComponent.
export default function withFeedback2(
WrappedComponent
) {
return class extends BaseComponent {
constructor(props) {
super(props);
}
render() {
return (
<View>
<TouchableNativeFeedback
onPress={() => this.props.onContainerViewPress()}
>
<WrappedComponent {...this.props} />
</TouchableNativeFeedback>
{/* <TouchableOpacity
onPress={this.props.onContainerViewPress ? () => this.props.onContainerViewPress() : null}
>
<WrappedComponent {...this.props} />
</TouchableOpacity> */}
</View>
);
}
};
}
But OnPress event of TochableNativeFeedback is not firing. Whereas OnPress event is fired correctly and onContainerViewPress prop of wrappercomponent is called if wrappercomponent wrapped under TouchableOpacity.
I am testing this on the Android Platform.

Answer 1

Use a <View></View> to wrap your WrappedComponent for TouchableNativeFeedback.
<TouchableNativeFeedback
onPress={() => this.props.onContainerViewPress()}>
<View>
<WrappedComponent {...this.props} />
</View>
</TouchableNativeFeedback>

Answer 2

There are two different TouchableNativeFeedback classes. Make sure you import the correct one:
import { TouchableNativeFeedback } from "react-native"
import { TouchableNativeFeedback } from "react-native-gesture-handler"
I had a similar problem and finally used it from "react-native" library. Importing it from "react-native-gesture-handler" did not work for me.

Answer 3

I've discovered that adding a Ripple effect to the TouchableNativeFeedback fixes the issue for me:
background={TouchableNativeFeedback.Ripple("#FFFFFF",true)}
i.e.
export default function withFeedback2(
WrappedComponent
) {
return class extends BaseComponent {
constructor(props) {
super(props);
}
render() {
return (
<View>
<TouchableNativeFeedback
onPress={() => this.props.onContainerViewPress()}
background={TouchableNativeFeedback.Ripple("#FFFFFF",true)}
>
<WrappedComponent {...this.props} />
</TouchableNativeFeedback>
</View>
);
}
};
}

Answer 4

Try: useForeground={true}
<TouchableNativeFeedback onPress={() => {}} useForeground={true}>

Answer 5

You can call method as below:
export default function withFeedback2(
WrappedComponent
) {
return class extends BaseComponent {
constructor(props) {
super(props);
this.onContainerViewPress = this.onContainerViewPress.bind(this);
}
onContainerViewPress() {
const { onContainerViewPress } = this.props;
onContainerViewPress();
}
render() {
return (
<View>
<TouchableNativeFeedback
onPress={() => { this.onContainerViewPress(); }}
>
<WrappedComponent {...this.props} />
</TouchableNativeFeedback>
{/* <TouchableOpacity
onPress={this.props.onContainerViewPress ? () => this.props.onContainerViewPress() : null}
>
<WrappedComponent {...this.props} />
</TouchableOpacity> */}
</View>
);
}
};
}

Answer 6

Try to import Touchable native feedback from react native gesture handler library

Answer 7

import { TouchableNativeFeedback } from "react-native"
import { TouchableNativeFeedback } from "react-native-gesture-handler"
Supplementing the answer of mangei the problem could be if you import it from the wrong place. You have to import it from react-native-gesture-handler if you are inside a gesture handler (NOTE: react-navigation's TabBar itself has a PanGestureHandler in it by default). What react-native-gesture-handler does is it wraps components like ScrollView or TouchableNativeFeedback with its own implementation to be able to handle gestures inside the GestureHandler as well that are "not meant" for the GestureHandler but rather for the ScrollView or the TouchableNativeFeedback. If you're inside the gesture handler, you have to import it from react-native-gesture-handler else from react-native.