Home » Android » React native TouchableOpacity onPress not working on Android

React native TouchableOpacity onPress not working on Android

Posted by: admin May 14, 2020 Leave a comment

Questions:

TouchabelOpacity works fine on iOS but the onPress method does not work on Android for me.

My react-native version: 0.57.4

My code:

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <Ionicons name="ios-menu" color="white" size={30} />
  </TouchableOpacity>
);
How to&Answers:

I had similar problem. Pay attention from where import your “TouchableOpacity”. When I changed “TouchableOpacity” from “react-native-gesture-handler” to “react-native”, it worked for me (for Android platform)

Answer:

I had the same issue, all TouchableOpacity buttons were working fine in iOS build, but there was one in Android that did not fire.
I stumbled upon this answer here that mentioned that position: absolute would mess up the trigger. It solved my issue.

Answer:

wrap the icon in a View like this.

const initDrawer = navigation => (
  <TouchableOpacity
    style={{ left: 16 }}
    onPress={() => onPressDrawerButton(navigation)}
  >
    <View style={{padding:5}}>
        <Ionicons name="ios-menu" color="white" size={30} />
    </View>
  </TouchableOpacity>
);

then if the problem persisted, style the icon with a backgroundColor and you’ll see a half of icon is not styled with backgroundColor so you have to give the padding a larger amount. I don’t know but icons tend to have problem in terms of volume, especially in TouchableOpacity.
That’s why I myself make a parent View with a padding for icons.
Something else that also others mentioned is postion:’absolute’ prop that messes with the Component volume.

Answer:

For me, I was using NativeBase and had the following structure, which was breaking on Android:

<List>
    <TouchableOpacity>
       <ListItem>
          <Text>Button</Text>
       </ListItem>
    </TouchableOpacity>
</List>

Once I removed the ListItem and just made the text a direct child of TouchableOpacity, then it worked.

Answer:

I forgot to follow the Android Getting Started steps for react-native-gesture-handler:

https://software-mansion.github.io/react-native-gesture-handler/docs/getting-started.html#android