react-native TouchableNativeFeedback onPress not working

how to use touchablewithoutfeedback react native
react-native touchablewithoutfeedback not working
react native touchablewithoutfeedback onpress not working
onclick in react native
react-native touchable not working
native feedback react native
nextfocusright react native
touchablenativefeedback props

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.

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

TouchableNativeFeedback onPress never fired when child isn't , TouchableNativeFeedback onPress never fired when child isn't View #23928 I will see some a warning message about this problem react-native-bot added Component: TouchableNativeFeedback Platform: Linux labels  Solution: I imported TouchableNativeFeedback from 'react-native' like so: import { TouchableNativeFeedback } from 'react-native'; I think TouchableOpacity and TouchableNativeFeedback do not fire onPress in a Modal component when imported from 'react-native-gesture-handler', only Button works. Hope this helps

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

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

TouchableWithoutFeedback does not fire onPress like other , Using latest react-native (0.59.5), I can't make a TouchableWithoutFeedback or TouchableNativeFeedback work inside a FlatList , the ripple is  touchableWithoutFeedback onPress and onPressOut function are not firing on Android specifically the Samsung Galaxy. This is working perfectly fine on IOS10.

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

react-native TouchableNativeFeedback onPress not working, I have created composed component to compose TouchableNativeFeedback to wrapperComponent. export default function withFeedback2(  I have the same issue right now with react-native 0.59.8 and react-native-gesture-handler 1.2.2 TouchableOpacity and TouchableHighlight aren't working on a basic react-native app on Android (it works well on iOS).

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

React-native TouchableNativeFeedback onPress not working, React-native TouchableNativeFeedback onPress not working. Vis Team Desember 11, 2018. I have created composed component to compose  react-native, react and native-base version. Expected behaviour. When the keyboard is open and a tap on button is performed, the onPress function should be fired immediatly.

Handling Touches · React Native, React Native provides components to handle all sorts of common gestures, Pressing the button will call the "onPress" function, which in this case displays an not provide any default styling, however, so you will need to do a bit of work to get You may consider using TouchableNativeFeedback on Android to display ink  Do not use unless you have a very good reason. All elements that respond to press should have a visual feedback when touched. TouchableWithoutFeedback supports only one child. If you wish to have several child components, wrap them in a View. Importantly, TouchableWithoutFeedback works by cloning its child and applying responder props to it. It is therefore required that any intermediary components pass through those props to the underlying React Native component.

TouchableNativeFeedback · React Native, On Android this component uses native state drawable to display touch feedback. <View style={styles.container}> <TouchableNativeFeedback onPress={()  But, the ripple effect was not working so I gave up bc to google play featured apps this is a HUGE deal. And also I was giving a try in a module that I understood that we will using by default some time soon. About where is documented: If the TouchableNativeFeedback react-native doc says that will show the ripple and the FlatUIImpl..

TouchableHighlight · React Native, On press down, the opacity of the wrapped view is decreased, which allows the which can sometimes cause unwanted visual artifacts if not used correctly,  This is a bit of a problem when creating buttons with borderRadius and TouchableNativeFeedback, and the ripples extend out. I'm not an expert but I suppose setNativeBackground needs to get the corner radius when making the mask for the RippleDrawable and setBorderRadius may need to remake the background drawable somehow.