React-native: [Android] Touchable doesn't dispatch onPress event when wrapping TextInput

Created on 15 Mar 2016 · 5Comments · Source: facebook/react-native

Good Afternoon React Native community,
I've recently found a need to wrap a Touchable component around a TextInput and to set the TextInput's editable property to false. While initially testing on the iOS simulator, I found no problem and everything worked as expected. The TextInput was unable to be focused and the Touchable component dispatched an event to the onPress callback. Now when testing on the Android simulator, I can not seem to fire the onPress event from the Touchable component. Here is a snippet of code on how I'm setting it up:
<TouchableHighlight onPress={() => this._onTouchablePress()} underlayColor="white" activeOpacity={1}> <TextInput editable={false}/> </TouchableHighlight>

I tried setting the editable property to both true and as expected the input was now focusable, but the onPress event would still not fire. Has anyone else experienced this issue? My best bet for the cause is that the TextInput is handling the click event for both the Touchable component and itself, however I am not 100% how to confirm this hypothesis.

Locked

Source

CapitanRedBeard

Most helpful comment

@CapitanRedBeard - here's an example that works for me: https://github.com/exponentjs/sortexp/blob/d9dfe5bf5d445b15231335980267c32026dbdbf9/main.js#L108-L133

the pattern is essentially:

<TouchableX onPress={() => { this.setState({isFocused: true}); this.something(); }}>
  <View pointerEvents={this.state.isFocused ? 'auto' : 'none'}>
      <TextInput />
  </View>
</TouchableX>

Long-term we need a better way to handle gestures that interact with each other, check out this awesome React.js Conf talk from Andy Matuschak about some of the challenges we still need to solve in that area, and if you're inspired, maybe you have a nice new project to work on :)

brentvatne on 20 Mar 2016

👍5

All 5 comments

@CapitanRedBeard - here's an example that works for me: https://github.com/exponentjs/sortexp/blob/d9dfe5bf5d445b15231335980267c32026dbdbf9/main.js#L108-L133

the pattern is essentially:

<TouchableX onPress={() => { this.setState({isFocused: true}); this.something(); }}>
  <View pointerEvents={this.state.isFocused ? 'auto' : 'none'}>
      <TextInput />
  </View>
</TouchableX>

brentvatne on 20 Mar 2016

👍5

Thanks for your outreach Brent!

CapitanRedBeard on 21 Mar 2016

👍1

brentvatne on 25 Mar 2016

Excellent talk by Andy Matuschak @brentvatne. I had the pleasure of having some :wine_glass: with him during NSSpain 2015 and he was very excited with React & React Native. I know this is a bit off-topic, but Josh Abernathy's talk was wonderful and he touched many of the aspects that RN tries to solve https://vimeo.com/144139236