Pressable not working in react-native android

Question

Description

When a child of a pressable component is pressed (such as an image), the function passed to the onPress prop does not execute on android. Works as expected on iOS.

React Native version:

0.63.2

Steps To Reproduce

1. Open a new expo snack
2. Create a Pressable component that is the parent of some other component (A text or image)
3. Set the onPress prop to call a function that has a visual effect. (Like an alert)
4. Switch to the android tab, and click 'Tap to play'

Expected Results

The function is called and the effect (an Alert) is fired

Snack, code example, screenshot, or link to a repository:

https://snack.expo.io/@razorshnegax/6c7be3

Code example:

import React from 'react';
import { View, Pressable, Image, Alert } from 'react-native';

export default class Index extends React.Component {
  render() {
    // The onPress function fires in iOS, but not android
    return (
      <View>
        <Pressable onPress={() => {Alert.alert("Yeep")}}>
          <Image source={require('./greatknight.png')} style={{
            // So that the image is more centered
            top: 100,
            left: 100
          }}/>
        </Pressable>
      </View>
    );
  }
}

Answer 1

Due to the styling, the Pressable component is not place behind the Image. You can see this by adding a color to the Pressable component.

A fix for this would be to style the Pressable component so the image components are aligned and events bubble through.

I'm not exactly sure why the event doesn't bubble through on Android as it should based on the component hierarchy.