React-native-gesture-handler: BaseButton ripple covered by child `<Image />`

You can use the absolute filling as a workaround, wrap button and image in a view and style button with absolute fill, btw I have to specify rippleColor too or I get some weird behavior.

This is why RN's TouchableNativeFeedback component has the useForeground prop. RNGH's three button components should imitate this behavior.

The "absolute filling" workaround doesn't work for me, btw.

Wrap Ripple.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { RectButton } from 'react-native-gesture-handler';

const styles = StyleSheet.create({
  box: {
    position: 'relative',
  },
  ripple: {
    position: 'absolute',
    left: 0,
    top: 0,
    width: '100%',
    height: '100%',
    zIndex: 1,
  },
});

export default ({ style, children, ...props }) => {
  return (
    <View style={[style, styles.box]}>
      {children}
      <RectButton rippleColor="#888" style={styles.ripple} {...props} />
    </View>
  );
};