Is there a way in which I can ignore touch events on Text in React Native?

I want to implement floating labels, for this I have a Text Component Above a TextInput. I want to ignore all the touch events on the Text so that the TextInput Under it gets all the events. Is there a way I can do this ? In CSS we used to have pointer-events none, I am not sure how to do this in react native.

Solution 1:

In react-native, pointerEvents is a prop, not a style.

    <View pointerEvents="none" />

Solution 2:

Add pointerEvents: 'none' to the Text component. This allows touch events to go to the ancestors of the component, but not the component itself or its children.

React Native also supports 'box-none', which allows touch events to go to the ancestors and children of the component, and excludes only the component itself.

Solution 3:

I had the same problem as Cryszon. On Android is seems like pointerEvents="none" doesn't work for Text components.

Wrapping the Text in a View and putting the pointerEvents="none" prop there solved it.

Solution 4:

pointerEvents work only on View not on Text or TouchableOpacity.