React Native: View onPress does not work

Question

I'm facing a weird problem. In my react native app, if I set onPress event to View it is not triggered but if I set the same to Text inside View, it fires. What am I missing here?

<View style={{backgroundColor: "red", padding: 20}}>
  <Text onPress={()=> {
    console.log('works');
    }
  }>X</Text>
</View>


<View style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</View>

Why is this so? Is this an issue with React Native? I'm using version 0.43

Ahsan Ali · Accepted Answer · 2017-04-27 18:27:44Z

273

You can use TouchableOpacity for onPress event. View doesn't provide onPress prop.

<TouchableOpacity style={{backgroundColor: "red", padding: 20}} onPress={()=> {
    console.log('does not work');
    }
  }>
  <Text>X</Text>
</TouchableOpacity>

answered Apr 27, 2017 at 18:27

Ahsan Ali

5,1352 gold badges19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nah Over a year ago

Complete reference documentation is here: facebook.github.io/react-native/docs/touchableopacity.html

ryanwebjackson Over a year ago

Can onPress work with an async function as its callback? I don't see mention of this in the official documentation.

Noitidart · Accepted Answer · 2017-09-28 13:56:50Z

39

You can wrap the view with a TouchableWithoutFeedback and then use onPress and friends like usual. Also you can still block pointerEvents by setting the attribute on on the child view, it even blocks pointer events on the parent TouchableWithoutFeedback, its interesting, this was my need on Android, I didn't test on iOS:

https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html

<TouchableWithoutFeedback onPressIn={this.closeDrawer}>
    <Animated.View style={[styles.drawerBackground, styleBackground]} pointerEvents={isOpen ? undefined : 'none'} />
</TouchableWithoutFeedback>

answered Sep 28, 2017 at 13:56

Noitidart

37.6k41 gold badges182 silver badges365 bronze badges

2 Comments

habed Over a year ago

Tested on iOS and it works just fine. Both with touchable without feedback and touchable highlight

Noitidart Over a year ago

Thanks for sharing @habed! Did the pointerEventsNone on the child block presses on the wrapping parent?

Sydney C. · Accepted Answer · 2020-02-17 12:14:19Z

15

Alternatively you can also provide onStartShouldSetResponder to your view, like so:

<View onStartShouldSetResponder={() => console.log("View click")}>
  // some code here
</View>

answered Feb 17, 2020 at 12:14

Sydney C.

97811 silver badges23 bronze badges

1 Comment

noxter Over a year ago

Although this works, it should be kept in mind that, in case you have a ScrollView containing 1 or more View that use onStartShouldSetResponder, the event attached to each View will be dispatched on the spot and you will not be able to scroll. This is hard to notice if you are using an iOS simulator on a Mac, but you will see it when the app is deployed and running on the phone. this is the correct answer

Naleen Dissanayake · Accepted Answer · 2018-08-22 17:22:44Z

7

You can use TouchableOpacity, TouchableHighlight, TouchableNativeFeedback, to achieve this. View component doesn't provide onPress as props. So you use these instead of that.

<TouchableNativeFeedback
        onPress={this._onPressButton}
</TouchableNativeFeedback>

OR

<TouchableHighlight onPress={this._onPressButton}>
</TouchableHighlight>

OR

<TouchableOpacity onPress={this._onPressButton}>
</TouchableOpacity>

answered Aug 22, 2018 at 17:22

Naleen Dissanayake

1812 silver badges6 bronze badges

Comments

Tyler2P · Accepted Answer · 2022-06-04 10:47:23Z

6

For this issue you can make use either

touchable(opacity,withoutfeedback,....)

or Pressable component which is currently available in react native Package like,

<TouchableOpacity onPress={()=>console.log("Pressed")}>
  ....
</TouchableOpacity>

or

<Pressable onPress={()=>console.log("Pressed")}>
  ....
</Pressable>

edited Jun 4, 2022 at 10:47

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jun 4, 2022 at 7:52

Bala Vigness

4671 gold badge4 silver badges10 bronze badges

Comments

Bisma Azher · Accepted Answer · 2020-12-26 15:37:50Z

5

onPress doesn't work on <View> tag use <TouchableOpacity> instead of View

<View>
<TouchableOpacity onPress={() => 'call your function here'}>
</TouchableOpacity>
</View>

answered Dec 26, 2020 at 15:37

Bisma Azher

7498 silver badges10 bronze badges

Comments

Iqbal · Accepted Answer · 2021-08-19 08:55:44Z

3

2021

If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API.

Source: https://reactnative.dev/docs/touchablewithoutfeedback

answered Aug 19, 2021 at 8:55

Iqbal

2,3941 gold badge25 silver badges32 bronze badges

Comments

Get · Accepted Answer · 2022-04-13 09:54:11Z

2

A new pressable component is provided in 0.67 of react native, which can solve your problem. It runs anywhere enter image description here

answered Apr 13, 2022 at 9:54

Get

212 bronze badges

Comments

thunder775 · Accepted Answer · 2021-06-18 07:20:13Z

1

well we can make the View have a onPress props onStartShouldSetResponder and onResponderGrant

<View
    onStartShouldSetResponder={() => true}
    onResponderGrant={() => console.log("view pressed")}
  >
</View>

answered Jun 18, 2021 at 7:20

thunder775

1011 silver badge5 bronze badges

Comments

AIK · Accepted Answer · 2021-07-08 09:35:47Z

1

You can use TouchableOpacity for that purpose

<TouchableOpacity onPress={() => {your code here}}>
    //Your inner views here
</TouchableOpacity>

answered Jul 8, 2021 at 9:35

AIK

5282 gold badges7 silver badges20 bronze badges

Comments

vishal Sharma · Accepted Answer · 2022-03-23 22:40:01Z

1

In View onPress will not work because onPress event is not supported in view tag.That is why it is not working but you can go to this link https://reactnative.dev/docs/view

answered Mar 23, 2022 at 22:40

vishal Sharma

312 bronze badges

Comments

Vinay K · Accepted Answer · 2024-04-14 14:09:41Z

1

You could use 'onTouchEnd' event handler which is similar to 'onPress' as onPress prop is unavailable on the 'View' component.

<View onTouchEnd={()=>{alert("Hello")}>

answered Apr 14, 2024 at 14:09

Vinay K

531 silver badge9 bronze badges

Comments

Ajay Bhargav · Accepted Answer · 2020-12-08 17:48:24Z

0

For anybody who's lookig for a solution to this, as of RN 0.63, there is a new Pressabe api. It might have rolled out a couple versions earlier but it works great for such use cases.

<Pressable onPress={onPressFunction}>
    <Text onPress={() => {
        console.log('works');
    }}>X</Text>
</Pressable>

answered Dec 8, 2020 at 17:48

Ajay Bhargav

171 silver badge4 bronze badges

2 Comments

William Over a year ago

That didn't work with me

neoncube Feb 26 at 7:19

Thanks, this is just what I needed, because it not only registers presses on the current element but also on all of its children! :)

Muhammad Tahir Ali · Accepted Answer · 2023-02-16 12:54:37Z

0

You can use Pressable components which is react native core component and wrap your View or any other component in Pressable which don't have onPress prop.

Like this:

<Pressable onPress={()=>console.log('pressed')}>
   <View>
     <Text>Some Text</Text>
   </View>
</Pressable>

Pressable Documentation

answered Feb 16, 2023 at 12:54

Muhammad Tahir Ali

4457 silver badges15 bronze badges

Collectives™ on Stack Overflow

React Native: View onPress does not work

14 Answers 14

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

2 Comments

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related