TouchableNativeFeedback inconsistency with React Native's

[todorone]

TouchableNativeFeedback of RNGH is inconsistent with RN's internal component:

<TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('white', false)}>
    <View style={{ width: 50, height: 50, marginBottom: 100 }} />
</TouchableNativeFeedback>

This code results in nice effect with RN's internal component, while with RNGH's component we have ripple effect not just on View's area, but also on all marginBottom's area, which looks ugly...

[sudiddo]

yes, please fix :(

[FRizzonelli]

@kmagiera Any news?

[piaskowyk]

Hey, could you try to run your example with API v2? It should resolve your problem.

[github-actions[bot]]

Hey! 👋

It looks like you've omitted a few important sections from the issue template.

Please complete Description, Platforms, Steps To Reproduce, Snack or minimal code example and Package versions sections.

[todorone]

@piaskowyk Just checked. The issue is still relevant with version 2.1.0.

Seems, that RNGH's component does not take into consideration 2nd parameter of TouchableNativeFeedback.Ripple - borderless. It always acts like it's true, even if false is passed.

RN's component handles properly both borderless = true | false.

[j-piasecki]

Hi! TouchableNativeFeedback is a tricky one 😞. On iOS it uses React Native's implementation, but on Android it relies on BaseButton component, same as the rest of GH's touchables. In order for ripple not to cover the margin area you would have to set the margin using containerStyle prop (it's not in the type declarations, so you will get errors but it will work), however since only Android relies on GH's implementation, this prop will have no effect on iOS. I know it's not a solution, but with that you should be able to make some sort of a workaround.