Can I disable a View component in react native?

Question

My app screen has a View component with few Text Inputs. I cannot disable text inputs. Is there a way that I can disable complete View?

P.S.: By Disabling a View component I mean that the component renders but becomes unresponsive of any action.

score 146 · Accepted Answer · edited Aug 27 '21 at 19:37

146

<View pointerEvents="none">
  ...
</View>

This will make the view unresponsive to touch events.

You can use something like

<View pointerEvents={myCondition ? 'none' : 'auto'}>

edited Aug 27 '21 at 19:37

iphonic

answered Sep 27 '16 at 08:45

Kerumen

score 28 · Answer 2 · edited Jan 08 '21 at 10:36

28

Adding to Kerumen's answer, in some rare cases:

<View pointerEvents={myCondition ? 'none' : 'auto'}>
  ...
</View>

You might need to wrap it in an anonymous function:

<View pointerEvents={() => myCondition ? 'none' : 'auto'}>
  ...
</View>

edited Jan 08 '21 at 10:36

Kerumen

answered Dec 19 '17 at 15:40

Hasn Ar

1

It looks like your code block didn't format the way you intended. Also, in what rare cases would you need to wrap* it in an anonymous function? – Joey Harwood Dec 19 '17 at 15:45
honestly, I don't but for some reason, it didn't work until I warp it in a function, I am investigating to find out the reason – Hasn Ar Dec 19 '17 at 16:17

score 0 · Answer 3 · answered May 25 '23 at 08:07

0

Create a TouchableOpacity in a space where you want to make it unresponsive to any action. like this :

<TouchableOpacity style={{ width : 40 , height : 40}} activeOpacity={1}>
</TouchableOpacity>

this area doesnt have any action from parents component

answered May 25 '23 at 08:07

amir behrouzi

3 Answers3