Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 590
user3300203 Avatar asked Sep 27 '16 08:09

user3300203


People also ask

Can I hide a view in React Native?

As we know, there is no direct way to Show / Hide or change the visibility of a View in React Native.

What is view component in React Native?

It's basically a small container that supports layout with flexbox, style, some touch handling, and accessibility controls. View maps directly to the native view equivalent on whatever platform React Native is running on, whether that is a UIView, <div>, android.

What is the primary purpose of a view component?

The most fundamental component for building a UI, View is a container that supports layout with flexbox, style, some touch handling, and accessibility controls.

How do I turn off Touch React Native?

React Native recipe: Disable touch/tap events on a transparent view. You might have encountered a use case where you want to hide a view but don't want to remove it from the view hierarchy. You can achieve this simply by making the view transparent by toggling opacity .


2 Answers

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> 
like image 34
Hasn Ar Avatar answered Oct 04 '22 14:10

Hasn Ar


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

like image 111
Kerumen Avatar answered Oct 04 '22 14:10

Kerumen