CODEWITHSUNDEEP
javascriptfacebookreactjsreact-nativereactjs-native
user3300203
user3300203

Reputation: 1055

Can I disable a View component in react native?

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.

Upvotes: 67

Views: 48649

Answers (3)

amir behrouzi
amir behrouzi

Reputation: 155

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

Upvotes: 0

Kerumen
Kerumen

Reputation: 4341

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

Upvotes: 155

Hasn Ar
Hasn Ar

Reputation: 291

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>

Upvotes: 29

Related Questions