React Native: Button behind transparent view

Question

For layout purposes, I am rendering several images on top of my view in a React Native app. These images are located at the top, left and right borders of the screen. They are contained by a View component with a transparent background.

This means that all the content of the screen will be behind that View component. The problem I have is that I can't touch any of my actual content now, as it's covered by the transparent View

Question: How can I touch components that are behind a transparent View in React-Native?

I can't be the first one dealing with this, yet it seems poorly documented online

Answer 1

A simple solution would be to set the pointerEvents prop to none for your transparent View:

<View pointerEvents="none">
  {/* your corner images */}
</View>

Since React Native 0.71.0, it is also possible to set it as a style property:

<View style={{ pointerEvents: 'none' }}>
  {/* your corner images */}
</View>

Definition from MDN:

In addition to indicating that the element is not the target of mouse events, the value none instructs the mouse event to go "through" the element and target whatever is "underneath" that element instead.

Other resources:

• Official documentation on React Native pointerEvents
• pointerEvents prop example from the React Native repository
• pointerEvents style example from the React Native repository