What is pointer event in React-Native

Question

I was going through the pointer event in React-native

In the docs, they have mentioned

Controls whether the View can be the target of touch events.
•   'auto': The View can be the target of touch events.
•   'none': The View is never the target of touch events.
•   'box-none': The View is never the target of touch events but it's subviews can be. It behaves like if the view had the following classes in CSS:

Here, I am Able to comprehend from property none that no touch events would work I.e touchableOpacity (and other touch events)? Is that correct?

But from the following tutorial video on YouTube

https://www.youtube.com/watch?v=aFwBzWV6A-w

It appears the author is using it disable events like textInput and rather using it for events like touchableOpactiy.

Answer 1

When setting pointerEvents to none, you are disabling all touch events for the view's children. This works for all Touchables but also for Inputs etc. In the video, the author is using it, to prevent the TextInput from getting focused, but he keeps the TouchableOpacity enabled to fire the animation. (See below Example)

Example:

Here, I am disabling the TextInput, but I am keeping the Touchable active:

<View>
<TouchableOpacity>
  <View pointerEvents="none">
    <TextInput ... /> 
  </View>
</TouchableOpacity>
</View>

If I would add pointerEvents="none" to the root View, both Touchable and TextInput would be deactivated.