React-native: Android TouchableNativeFeedback ripple effect is misplaced if pressed on a sub component

[bcalik]

Hello,

TouchableNativeFeedback's ripple effect is misplaced when I press on a Text component inside.
Update: It is not just Text component. I think all components are affected, like Image.

Click for simple rnplay sample.
Gif is also attached below.

Tested on:
RN v0.20.0
Android 6.0

[heydabop]

No word on this?

[evollu]

does this only happen in android 6.0?

[bcalik]

It happens on all versions that support ripple effect. (api v21+)

[julien-rodrigues]

In case this helps,
I had the same issue when pressing a centered content in a container using flex properties.
I ended up dropping flex on this one because it seems some of its properties were making the position of the ripple glitchy (alignItems in my case).
I solved it by using textAlign and textAlignVertical instead.

return (
    <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('red')} delayPressIn={0}>
      <View style={styles.box}>
        <Text style={styles.boxText}>
          Centered content
        </Text>
      </View>
    </TouchableNativeFeedback>
  );

const styles = StyleSheet.create({
  box: {
    borderWidth: 1
  },
  boxText: {
    fontSize: 15,
    height: 50,
    textAlign: 'center',
    textAlignVertical: 'center'
  }
});

[julien-rodrigues]

But I spotted something weird happening only on my physical device (Nexus 6P).
It seems that when I add a margin or padding to the container of the component, the ripple is not created where I press but a little below. In the emulator it works correctly tho.

[bcalik]

@julien-rodrigues I have to use flex for a complex ui, like the gif in the first post. But it's a workaround tho.

[julien-rodrigues]

Yes it's definitely a workaround. I'd love to put back flex on it

[VinceBT]

+1

[Ehesp]

Adding delayPressIn={0} made this feel much more native. Without this you have to hold down the component to get any sort of feedback (which is not native). However I'm also experiencing some weird placement now with margins/flex etc, but it's much better now.

[vonovak]

+1 android 6.0.1 RN 0.27.2

@mkonicek seems like you authored a lot of code in TouchableNativeFeedback, any thoughts? Thanks!

[mkonicek]

@vonovak I did the initial commit to GitHub, not the original author. There's a pull request to fix this, let's discuss there: https://github.com/facebook/react-native/pull/8111

[mkonicek]

Hi there! This issue is being closed because it has been inactive for a while.

But don't worry, it will live on with ProductPains! Check out its new home: https://productpains.com/post/react-native/android-touchablenativefeedback-ripple-effect-is-misplaced-if-pressed-on-a-sub-component

Product Pains has been very useful in highlighting the top bugs and feature requests:
https://productpains.com/product/react-native?tab=top

Also, if this issue is a bug, please consider sending a pull request with a fix.

[naistran]

Did #8111 really fix this? Still having this issue on 0.41.0 (Exponent 14.0.0). Does anyone else have it?

[smallpath]

@nthtran same here after upgrading from 0.35 to 0.41.

[onlydave]

Coming to the end of the day for me so might be losing it a bit but doesn't look like it's fixed on 0.42.0

Did that pull not just fix the positioning in general? This issue is more specifically where the user taps a child of TouchableNativeFeedback.

RN: 0.42.0
Android: 7.1.1

[naistran]

Reopen this @mkonicek?

[zecaptus]

You can handle that with the pointerEvents prop.

<TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('red')}>
    <View pointerEvents='box-only'>
       <...>
    </View>
</TouchableNativeFeedback>