React-native: touchableWithoutFeedback onPress and onPressOut not firing on Android

[larryranches]

Issue Description

touchableWithoutFeedback onPress and onPressOut function are not firing on Android specifically the Samsung Galaxy.

This is working perfectly fine on IOS10.

Steps to Reproduce / Code Snippets

Code snippet of using the onPressOut function

<TouchableWithoutFeedback onPressOut={ this.onStopRecording }>

Expected Results

function should fire on Android. Is working for IOS!

Additional Information

• React Native version: 0.33
• Platform(s) (iOS, Android, or both?): ANDROID
  Operating System (macOS, Linux, or Windows?): OSX

[larryranches]

Also not working on Nexus 5x. Any ideas? Seems to be only android related.

[marcshilling]

I've been having similar issues with <TouchableWithoutFeedback> on iOS as well. RN 0.34.1.

I've fallen back to just using <TouchableOpacity> with activeOpacity: 1

[AndrewHenderson]

I found the following did not work with TouchableWithoutFeedback but is working with TouchableOpacity on React Native 0.37.0:

return (
  <View style={styles.sceneContent}>
    <ScrollView>
      <TouchableOpacity
        onPress={this.handlePersonPress.bind(this)}
      >
        <PersonHeading
          photoUrl={this.state.person.photoUrl}
          name={this.state.person.firstName}
        />
      </TouchableOpacity>
      <Image
        style={{height: 250}}
        source={{uri: this.props.photoUrl}}
      />
      <View style={styles.eventContent}>
        <Text style={[styles.h2, styles.centerText]}>{this.props.description}</Text>
        <Text style={[styles.h3, styles.centerText]}>{this.props.location}</Text>
        <Text style={[styles.centerText]}>{renderTime(this.props.startTime)}</Text>
        <Text style={[styles.centerText]}>{renderTime(this.props.endTime)}</Text>
      </View>
      <View style={styles.scenePad}>
        <Button
          style={[styles.button, styles.backgroundBlue]}
        >
          Request to Join
        </Button>
      </View>
    </ScrollView>
  </View>
);

I wonder if it has something to do with being nested within the ScrollView, since I have it working fine in another component that is not the direct descendent of a ScrollView.

I'll upgrade to the latest version and update this comment with the results.

[CorentinDeBoisset]

It is working for me today, maybe it was solved in more recent versions (tested on 0.41 on the android emulator).

[benjaminreid]

I've ran into this today, TouchableWithoutFeedback was working perfectly fine until it wasn’t. RN 0.41 and running in the up to date iOS simulator. Very bizarre.

[larryranches]

Any ideas on this? The onPressOut is still not firing only for Android. Working perfect on ios still. I'm now on RN 0.43

[koenpunt]

I found that TouchableWithoutFeedback always needs to have child View component. So a component that composes a View isn't enough.

So instead of

<TouchableWithoutFeedback onPressIn={...} onPressOut={...} onPress={...}>
  <MyCustomComponent />
</TouchableWithoutFeedback>

I now use:

```jsx

[oliverbenns]

Fixed my issue thanks @koenpunt . Kind of depressing though.

[hramos]

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

• Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
• If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
• Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

[mgagnon555]

It is not fixed (RN 0.49.3), unless "having to add a and then it works" is considered fixed. The only child my TouchableWithoutFeedback had is a custom Header extending Component. Adding a View works but ... why?

[spearmootz]

yep. im having this issue right now. adding the view works but it messes up everything

[nicolasconnault]

Problem is still there, solution still works.

[Elijen]

@hramos Reopen so issues can actually get fixed?

[bala-compassites]

Its not working. Problem is still there.

[rafaelgrilli92]

@koenpunt approach worked for me.

[robhung]

It's strange because I've made a component that renders a <View> with pre-configured styles and even then, it doesn't work. It needs a completely new <View component for this to work.

RN 0.49.5

[katerynkas]

Not working for me too even with a View component inside.

[TheDutchCoder]

Still not working on RN 0.53.0

[Elijen]

I am sure any contributors already muted this issue so bumping it is pointless. Just use <View> component inside as @koenpunt suggested. If it's not working even with it, open a new issue.

[TheDutchCoder]

Okay I figured out the issue, it's that the component itself does not support proper styling and collapses around its child view.

Not sure if that's by design or not (all other touchables are properly stylable), so I'll open an issue for it.

[jayasme]

You must put something into it to make it work, just put a <View> and wrap your JSX into the view is the first step, the next is making the view flex=1

<TouchableWithoutFeedback>
    <View style={{flex:1}}>
         ... your actual JSX
    </View>
</TouchableWithoutFeedback>

Using this component is like a nightmare.

[TheDutchCoder]

Yeah it's wildly inconsistent right now, it should be fixed so it behaves like other Touchables.

[rmacqueen]

Also ran into this - it's quite frustrating to have to include the additional gratuitous View. I opened #18611 as a follow-up since this one was prematurely closed.

[pintocarlos]

I have this issue also, using 0.54
I had to add the extra View which is a shame.

[dazweeja]

For the record, it's not necessary to add an extra view, you just need to ensure that the props that TouchableWithoutFeedback injects into it's child component are passed down to the View inside your custom component. For example, your custom component might be something like this:

<View {...this.props}>
  ... etc
</View>

It's explained in https://github.com/facebook/react-native/issues/1352