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

[j-piasecki]

Hi! Adding foreground prop to the BaseButton should fix the problem. I'm not sure why it's not present in the types for it, but it will work nonetheless. I'll update the types for it soon.