React Native recipe: Disable touch/tap events on a transparent view
1 min readMay 3, 2020
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