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.

Reba

Answer 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'}>

Crop

Thanks for this solution. – Reba

Can we give it conditinally? – Rostock

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

super useful prop, how i never heard of it? – Caltrop

thanhks, this is quickly. – Benares

Answer 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>

Sasnett

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? – Florin

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 – Sasnett

This worked perfectly! – Cully

Answer 3

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

Ceramics