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 .

opacity: 0 //Fully transparent
opacity: 1 //Fully Opaque

But there’s a catch. This transparent or hidden view can still be target of touch events which is not ideal.

Here’s a handy trick to disable all touch events on this transparent view. You can utilize pointerEvents prop of the view to enable/disable touch events.

//Hidden view
.box-hidden {
  opacity: 0;
  pointer-events: none;
}
//Visible view
.box-visible {
  opacity: 1;
  pointer-events: auto;
}

Docs: https://facebook.github.io/react-native/docs/view.html#pointerevents