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?

There is no issue with the code. is there any errors or warning ? — Amila Dulanjana, Dec 01 '18 at 17:04
Are you on debug mode ? and arent you seeing anything in the console ? — Guruparan Giritharan, Dec 01 '18 at 17:27
I changed to show alert. Not triggered. If I used TouchableHighlight, it works. — Wai Yan Hein, Dec 01 '18 at 17:29
Try this https://github.com/facebook/react-native/issues/10180#issuecomment-298375648 — Daniel Gabor, Dec 01 '18 at 20:26
TouchableWithoutFeedback is just bad, IMO. Doesn't work for no reason sometimes, doesn't use the same API as the other touchables. Requires a single view as a child for no reason, doesn't support absolute positioning. Like, why? — ICW, Sep 03 '21 at 16:08

score 59 · Accepted Answer · answered Feb 20 '20 at 23:04

59

You should wrap your content in component like this:

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

answered Feb 20 '20 at 23:04

Turkysha

614
7
3

5

The [github issue](https://github.com/facebook/react-native/issues/10180#issuecomment-298375648) has already been discussed in the comments. Perhaps you can fill in the other details so it's all in one place. Simply posting a code snippet without an explanation is rarely helpful. – Boyan Hristov Feb 20 '20 at 23:34
I have to search first for any issue or errors instead of figuring out by myself and wasting huge time on small things. which already has been known issues.... by the why thanks for posting this answer. – dipenparmar12 Dec 06 '20 at 08:43

score 30 · Answer 2 · answered Jul 08 '20 at 14:20

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>

use:

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

See the github issue for more info

score 13 · Answer 3 · answered May 22 '20 at 07:54

13

Can be used with <TouchableOpacity activeOpacity={1.0}> </TouchableOpacity>

answered May 22 '20 at 07:54

Avijit

1,253
13
21

1

Better solution IMO – ICW Sep 03 '21 at 16:08

score 2 · Answer 4 · answered Jun 01 '21 at 08:48

2

For those who struggle with this issue in react-native 0.64, and wrapping it in just a View doesn't work, try this:

  <TouchableWithoutFeedback onPress={onPress}>
    <View pointerEvents="none">
      <Text>Text</Text>
    </View>
  </TouchableWithoutFeedback>

answered Jun 01 '21 at 08:48

duskload

21
3

Thanks a lot. The pointerEvents="none" helped me to solve a particular problem. – Alexander Mar 25 '22 at 01:29

score 2 · Answer 5 · answered Nov 16 '22 at 07:18

2

In more recent React Native versions, just use Pressable instead: https://reactnative.dev/docs/pressable

answered Nov 16 '22 at 07:18

Andreas Bergström

13,891
5
59
53

score 1 · Answer 6 · answered Apr 02 '22 at 14:39

1

In my case i accidentally imported TouchableWithoutFeedback from react-native-web instead of react-native. After importing from react-native everything worked as expected.

answered Apr 02 '22 at 14:39

emrich

145
1
9

1

I imported it form `react-native-gesture-handler`, you saved at least 30 minutes. – Dev Ayush Feb 04 '23 at 11:29

score -1 · Answer 7 · answered Feb 26 '22 at 13:07

In my case, there was a shadow underneath, which caused instability. What I did to solve it was quite simple: zIndex: 65000

<View style={{ zIndex: 65000 }}>
   <TouchableWithoutFeedback onPressIn={() =>  {}>
     <View>
     </View>
   </TouchableWithoutFeedback>
</View>

React native onPress with TouchableWithoutFeedback is not working

7 Answers7