TouchableWithoutFeedback with custom component inside doesn't fires onPress callback

[liubko]

I made a demo https://rnplay.org/plays/iBVgwg

so the problem is that third button isn't working. The only difference between buttons is the way I passed them in Header component.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  View,
  TouchableWithoutFeedback,
  Text
} = React;

var ThirdButton = React.createClass({
  render() {
    return (
      <View style={styles.button}>
        <Text>Third Button</Text>
      </View>
    );
  }
});

var Header = React.createClass({
  propTypes: {
    secondButton: React.PropTypes.object,
    thirdButton: React.PropTypes.object,
    onPress: React.PropTypes.func,
  },

  _handlePress(data) {
    this.props.onPress(data);
  },

  /*==========  render  ==========*/
  render() {
    return (
      <View style={styles.container}>
        <TouchableWithoutFeedback onPress={this._handlePress.bind(this, "First")}>
          <View style={styles.button}>
            <Text>Fitst Button</Text>
          </View>
        </TouchableWithoutFeedback>

        <TouchableWithoutFeedback onPress={this._handlePress.bind(this, "Second")}>
          {this.props.secondButton}
        </TouchableWithoutFeedback>


        <TouchableWithoutFeedback onPress={this._handlePress.bind(this, "Third")}>
          {this.props.thirdButton}
        </TouchableWithoutFeedback>
      </View>
    );
  }
});


var SampleApp = React.createClass({
  getInitialState(){
    return {
      text: "Tap on the button"
    };
  },

  _handlePress(msg) {
    this.setState({
      text: msg
    });
  },
  render() {
    return (
      <View>
        <Header secondButton={<View style={styles.button}><Text>Second Button</Text></View>}
                thirdButton={<ThirdButton />}
                onPress={this._handlePress} />
        <Text>{this.state.text}</Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    backgroundColor: "#eee",
    height:60,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },
  button: {
    backgroundColor: "#FF0",
  }
});

// AppRegistry.registerComponent('SpeedPocket', () => SampleApp);

module.exports = SampleApp;


React.AppRegistry.registerComponent("SpeedPocket", () => SampleApp);

[brentvatne]

Hi @liubko! Thanks for the great example.

I was able to fix it in this example - notice that I changed the <View> in your ThirdButton to include {...this.props}

<View style={styles.button} {...this.props}>
 .. etc
</View>

The reason for this is that TouchableWithoutFeedback will set responder props on that component, but ThirdButton is just a composite component with no backing UIView, so I want to pass those on to the View. See what I'm talking about here

[liubko]

make sense, thank you

[brentvatne]

@liubko - if you would like to update the docs for TouchableWithoutFeedback to explain this, that would be great 😄