React native onPress with TouchableWithoutFeedback is not working

Question

I am developing a simple React Native application for learning purpose. I am just taking my initial step to get into the React Native world. But in this very early stage, I am having problems. I cannot get a simple touch event working. I am implementing touch event using TouchableWithoutFeedback. This is my code.

class AlbumList extends React.Component {      constructor(props)     {         super(props)         this.state = {             displayList : true         }     }     componentWillMount() {         this.props.fetchAlbums();     }      albumPressed(album)     {         console.log("Touch event triggered")     }      renderAlbumItem = ({item: album}) => {         return (                 <TouchableWithoutFeedback onPress={this.albumPressed.bind(this)}>                     <Card>                         <CardSection>                             <Text>{album.artist}</Text>                         </CardSection>                         <CardSection>                             <Text>{album.title}</Text>                         </CardSection>                     </Card>                 </TouchableWithoutFeedback>             )     }      render() {         let list;         if (this.state.displayList) {             list = <FlatList                 data={this.props.albums}                 renderItem={this.renderAlbumItem}                 keyExtractor={(album) => album.title}             />         }          return (             list         )     } }  const mapStateToProps = state => {     return state.albumList; }  const mapDispatchToProps = (dispatch, ownProps) => {     return bindActionCreators({         fetchAlbums : AlbumListActions.fetchAlbums     }, dispatch) }  export default connect(mapStateToProps, mapDispatchToProps)(AlbumList); 

As you can see, I am implementing touch event on the list item. But it is not triggering at all when I click on the card on Simulator. Why? How can I fix it?

Answer 1

You should wrap your content in component like this:

<TouchableWithoutFeedback>  <View>   <Your components...>  </View> </TouchableWithoutFeedback>