react-native TouchableNativeFeedback onPress not working

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

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 2

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 3

Use a <View></View> to wrap your WrappedComponent for TouchableNativeFeedback.

<TouchableNativeFeedback
  onPress={() => this.props.onContainerViewPress()}>
    <View>
      <WrappedComponent {...this.props} />
    </View>
</TouchableNativeFeedback>

Answer 4

Try: useForeground={true}

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

Answer 5

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 6

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.

Answer 7

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