TouchableRipple ripple effects starts from the wrong location

[jHorovitz]

Pressing a TouchableRipple sometimes starts the ripple effect from the wrong location

TouchableRipple should start from where the button is pressed.

https://snack.expo.io/gicfPGsuQ

Sorry I don't know how to make a video with where I press on my android phone. Happy to help out with this if you have instructions on how to do this. This is pretty easy to recreate by pressing alternating corners of the button. You will notice that the ripple sometimes comes out of the previous location.

What have you tried

I don't think the environment is relevant as this is reproducible in a snack.

software	version
ios or android	android Pixel 3 running expo client 2.17.5
react-native	0.63.3
react-native-paper	4.4.1
node	15.2.1
npm	6.14.9
expo	39.0.5
react-native-vector-icons	7.1.0

https://snack.expo.io/gicfPGsuQ

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo
• npm

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• react-native (found: 0.63.2, latest: 0.63.3)
• react-native-paper (found: 4.4.0, latest: 4.4.1)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[jHorovitz]

Couldn't find version numbers for the following packages in the issue:

• react-native
• react-native-paper
• react-native-vector-icons
• expo
• npm
• yarn

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

updated and problem still happens. It's also happening in the snack which I assume uses the latest versions by default.

[github-actions]

Couldn't find version numbers for the following packages in the issue:

• react-native-vector-icons
• expo
• npm

Can you update the issue to include version numbers for those packages? The version numbers must match the format 1.2.3.

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• npm (found: 7.0.10, latest: 6.14.9)
• expo (found: 4.0.4, latest: 39.0.5)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[mikelpr]

I came here to report this

I made a screen recording and you can see where I'm tapping

[github-actions]

Hello 👋, this issue has been open for more than 2 months with no activity on it. If the issue is still present in the latest version, please leave a comment within 7 days to keep it open, otherwise it will be closed automatically. If you found a solution on workaround for the issue, please comment here for others to find. If this issue is critical for you, please consider sending a pull request to fix the issue.

[mikelpr]

no solution and no workaround, waiting for it to be fixed in the library.

[Hatyman]

same issue. Looks like it updates touch position after ripple, but expected before animation.

[intergalacticspacehighway]

Created a PR for the fix - facebook/react-native#31777

[intergalacticspacehighway]

This has been fixed and released in react native 0.66. 🥳

[ashuvssut]

There are 2 possible fixes:

• It happens when you havn't kept your button children wrapped inside a single View. The View wrapper should be the only childe of your TouchableRipple
• Still not fixed? use TouchableNativeFeedback from react-native-gesture-handler