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

[chhornponleu]

Issue:

BaseButton ripple works fine with Text as child, but not with Image.

To reproduce:

<BaseButton style={{height: 150, width: 100}}>
   <Image source={...} style={{width: 100, height: 100}}/>
</BaseButton>

"react-native-gesture-handler": "^1.0.16",
"react": "16.8.3",
"react-native": "0.59.1",

Tested Device: Samsung Galaxy S6, Android 7.0

[eyousefifar]

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.

[TheWirv]

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.

[liran]

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>
  );
};