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.

score 13 · Answer 1 · answered May 27 '18 at 18:05

13

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

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

answered May 27 '18 at 18:05

1

I had a similar problem. I did what you suggested and wrapped my component inside a view, which was wrapped by the TouchableNativeFeedback. I didn't get the ripple effect but the onPress fired. Can you tell me why this is the case? – Jo Momma Jul 15 '20 at 19:07

score 6 · Answer 2 · answered Jan 18 '20 at 15:17

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.

score 4 · Accepted Answer · answered Dec 12 '18 at 03:16

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>
      );
    }
  };
}

score 1 · Answer 4 · answered Apr 04 '21 at 09:57

1

Try: useForeground={true}

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

answered Apr 04 '21 at 09:57

Lalit Garghate

119
1
5

score 0 · Answer 5 · answered May 27 '18 at 10:25

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>
            );
        }
    };
}

score 0 · Answer 6 · answered Sep 30 '19 at 12:23

0

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

answered Sep 30 '19 at 12:23

TheEhsanSarshar

2,677
22
41

score 0 · Answer 7 · answered Nov 10 '20 at 15:14

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.

react-native TouchableNativeFeedback onPress not working

7 Answers7