TouchableNativeFeedback and flexDirection 'row'

[fabianmuecke]

I have a view where I try to render a bar of 3 buttons at the top of the screen like this (simplified example):

<View style={{flex: 1, flexDirection: 'row'}}>
  <TouchableNativeFeedback key="nf1" background={TouchableNativeFeedback.SelectableBackground()}>
    <View style={{height: 100, width: 100}}><Text>Test</Text></View>
  </TouchableNativeFeedback>
  <TouchableNativeFeedback key="nf2" background={TouchableNativeFeedback.SelectableBackground()}>
    <View style={{height: 100, width: 100}}><Text>Test</Text></View>
  </TouchableNativeFeedback>
  <TouchableNativeFeedback key="nf3" background={TouchableNativeFeedback.SelectableBackground()}>
    <View style={{height: 100, width: 100}}><Text>Test</Text></View>
  </TouchableNativeFeedback>
</View>

For the second and third button, the animated effect starts to spread from the right edge and lower half of the button, no matter where the touch occurs. For the first button the effect works as expected (the animation starting to spread from the touch point).

If I remove flexDirection: 'row', the effect works as expected for all buttons (but of course does not render the layout I want).

Edit: flexDirection: 'column' doesn't work properly, too. There the effect starts at the bottom of the second and third element, no matter where the touch occurs.

[facebook-github-bot]

Hey fabianmuecke, thanks for reporting this issue!

React Native, as you've probably heard, is getting really popular and truth is we're getting a bit overwhelmed by the activity surrounding it. There are just too many issues for us to manage properly.

• If you don't know how to do something or something is not working as you expect but not sure it's a bug, please ask on StackOverflow with the tag react-native or for more real time interactions, ask on Discord in the #react-native channel.
• If this is a feature request or a bug that you would like to be fixed, please report it on Product Pains. It has a ranking feature that lets us focus on the most important issues the community is experiencing.
• We welcome clear issues and PRs that are ready for in-depth discussion. Please provide screenshots where appropriate and always mention the version of React Native you're using. Thank you for your contributions!

[grabbou]

Hey and thanks for reporting this!

There's an awesome place to ask question like this one: StackOverflow. It's the best system for Q&A. Many people from the community hang out there and will be able to see your question, you can vote on answers and mark question as answered etc. This lets us keep a list of bug reports and feature requests on github and especially Product Pains (again, with voting which is really nice).

If you think StackOverflow works for you please consider posting there instead and closing this issue.

I'm posting this here because github issues haven't been working very well for us and because StackOverflow is so much better. Thanks for reading! :)

[fabianmuecke]

Actually this wasn't a question, but a bug report, so opening an issue here seemed like the right way to go for me. The bug is related to 48117ce which only partially fixes the problem.

[grabbou]

Okey, sorry for false alert then! Mistakes happen as we go through dozens of similar issues on daily basis :)

[fabianmuecke]

No problem and thanks for reopening! Just wanted to make sure this thing is fixed eventually. I'm sure it's not the most important problem you guys have got at the moment, but seeing a fix some day would still be nice.

[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/touchablenativefeedback-and-flexdirection-row

ProductPains helps the community prioritize the most important issues thanks to its voting feature.
It is easy to use - just login with GitHub. GitHub issues have voting too, nevertheless
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.
We're a small team and rely on the community for bug fixes of issues that don't affect fb apps.

[izadmehr]

Is there any solution to this bug?
If the TouchableNativeFeedback child have flexDirection: 'row', ripple not working correctly. As you touch the top-right corner, ripple appears at the top-left corner.

[Galti]

The issue still exists. I also have the same problem.