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.

Solution 1

You can use pointerEvents:

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

This will make the view unresponsive to touch events.

You can use something like

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

Solution 2

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>

Comments

[user3300203]

Thanks for this solution.

[Dhrupal]

Can we give it conditinally?

[Kerumen]

Yes you can use something like <View pointerEvents={myCondition ? 'none' : 'auto'}>

[Joey Harwood]

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?

[Admin]

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

[Nicolas Silva]

super useful prop, how i never heard of it?