112

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.

Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
Mayank Patel
  • 2,787
  • 3
  • 13
  • 6
  • It would be helpful to show us what you have so far. – Rian Schmits May 04 '15 at 22:39
  • I am trying to build something like http://codepen.io/soulrider911/pen/ugnyl – Mayank Patel May 05 '15 at 15:03
  • 1
    If anyone is looking for the solution in **normal React** (*not React Native*), you can simply set the css to `pointer-events: none` for the element that you want the clicks to pass through. – protoEvangelion Jun 06 '17 at 06:36
  • If you are using @react-navigation/drawer and getting this error, The below link might help you. https://stackoverflow.com/a/76329208/20972519 – Nidhul May 25 '23 at 07:17

7 Answers7

253

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

<View pointerEvents="none" />
Youssouf Oumar
  • 29,373
  • 11
  • 46
  • 65
Gil Birman
  • 35,242
  • 14
  • 75
  • 119
  • 2
    seems to work if set this way `` – pnizzle Jan 22 '18 at 01:31
  • 18
    In some cases, you may want the subviews to still be the target of touches so pointerEvents={'box-none'} would be the appropriate solution: https://facebook.github.io/react-native/docs/view.html#pointerevents – RaphArbuz Mar 05 '18 at 18:20
  • 1
    Also since OP asked about `Text` specifically, it's important to note that the `Text` component does not have a `pointerEvents` prop at all. SO, you will need to wrap the Text in a View and set the view's `pointerEvents` prop to be none. – ICW Apr 04 '22 at 19:50
62

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.

ide
  • 19,942
  • 5
  • 64
  • 106
  • 15
    For some reason I couldn't get it to work on a `Text` component, but wrapping the `Text` in a `View` and putting the `pointerEvents="none"` prop there solved it. – Cryszon Feb 05 '16 at 13:43
34

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.

Jake Coxon
  • 4,958
  • 1
  • 24
  • 15
7

pointerEvents work only on View not on Text or TouchableOpacity.

Penny Liu
  • 15,447
  • 5
  • 79
  • 98
Saikat Saha
  • 772
  • 1
  • 16
  • 38
0

If you have an issue where even 'box-none' doesn't allow touch events to go to the children, you could do something like this

let setPointerEvents = 'none';
...
<View pointerEvents={setPointerEvents}>
   ...
   <TouchableOpacity onPress= {()=>this.set(false)}/>

</View>
<TouchableOpacity onPress= {()=>this.set(true)}/>
...
set(bool){
    switch(bool){
      case true:
        setPointerEvents= 'auto'
        break;
      case false:
        setPointerEvents= 'none'
        break;
   }
}

Kind of a hack, but it works.

Kyriakos Xatzisavvas
  • 304
  • 1
  • 13
0

When you want to override a react <TextInput> object with a custom modal for input for example, you can do this:

<TouchableOpacity
onPress={() => this.openSourceOptions()}
>
  <TextInput
  label={"InputBox"}
  editable={false}
  pointerEvents="none"
  value={somevalue}
  mode="outlined"
  />
</TouchableOpacity>
Monkins1010
  • 13
  • 3
0

PointerEvents didn't work on my View for some reason. I wrapped the View with a Pressable without giving onPress function. This worked for me.

Shehan DMG
  • 141
  • 1
  • 15