TouchableOpacity onPress not working on Android

Question

I have 3 simple react components-

First the actual view(let us name this screen A)-

return(
    <ImageBackground
    ...
    >
       <ScrollView>


          <ChildButton
            onPress={this.someFunction.bind(this)}
           />

       </ScrollView>
    </ImageBackground>
)

Then there is the ChildButton component---

    return(
    <ChildButton>
       <Button
         style={...someStyleObject}
         onPress={this.props.onPress}
        >

       </Button>

    </ChildButton>
)

and then there is Button component ---

return (
<TouchableOpacity
  onPress={this.props.onPress}
 >
    {this.props.children}
</TouchableOpacity>

)

The main problem here is my onPress is not getting called from screen A, only on Android. It is working fine on iOS. What are the possible causes here?

Note: I've put consoles inside ChildButton and Button component and they are not getting printed.

Does 'ChildButton' component use itself in render method? `return( ` — Oleksandr Blyzniuk, Jul 11 '18 at 14:50
@OleksandrBlyzniuk ChildButton is a functional component whereas Button is a class component. — Mayank Baiswar, Jul 11 '18 at 15:01

score 14 · Answer 1 · answered May 08 '19 at 07:57

14

I ran into this issue when I accidentally imported TouchableOpacity from "react-native-gesture-handler" instead of from "react-native". If this is the case for you, change so TouchableOpacity is imported from "react-native" and remove the import from "react-native-gesture-handler" and it should work!

answered May 08 '19 at 07:57

Lurifaxel

674
6
17

Thank you! Now just hang on a moment while I put on my dunce cap. – Kent Robin Jul 15 '19 at 10:41
Yeah, hi. It's me again. Guess I should just keep the cap on then. Cheers. – Kent Robin Aug 08 '19 at 17:21
Thanks a lot! Made that mistake already 5 times and I forget to look for the auto imports every time. – Ryupold Sep 06 '19 at 11:35
Hahah wow. Thank you for this. I tried everything before realizing this was the issue. It works on ios which makes it harder to track down – elcapitan Dec 10 '19 at 19:15

score 3 · Answer 2 · answered Jul 17 '19 at 16:25

3

I also ran into this issue when I inherited a RN project in progress. I didn't realize we had this "react-native-gesture-handler" package installed and accidentally let VS Code auto import it.

Always check your imports! :)

answered Jul 17 '19 at 16:25

Steve

1,168
7
9

Hemant Mali · Answer 3 · 2020-08-27T08:38:58.023

2

import {TouchableOpacity} from 'react-native' 
works fine in both android and iOS


import {TouchableOpacity} from 'react-native-gesture-handler'
Does not work in android, but works in iOS.

So better to user react-native imports.

onPress event is not calling in android if TouchableOpacity imported from react-native-gesture-handler.

edited Aug 27 '20 at 08:38

answered Aug 27 '20 at 08:28

Hemant Mali

29
3

TouchableOpacity onPress not working on Android

3 Answers3