TouchableNativeFeedback ripple position bug

[maickonn]

Description

When you make the second click on the TouchableNativeFeedback, the ripple effect is occurring at the position of the previous click.

Video sample:

React Native version:

System:
    OS: Windows 10 10.0.18363
    CPU: (8) x64 Intel(R) Core(TM) i7-4770 CPU @ 3.40GHz
    Memory: 5.35 GB / 11.89 GB
  Binaries:
    Node: 12.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.10.2 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK:
      API Levels: 25, 27, 28, 29
      Build Tools: 28.0.2, 28.0.3, 29.0.0, 29.0.2
      System Images: android-28 | Google APIs Intel x86 Atom, android-28 | Google Play Intel x86 Atom
      Android NDK: 21.1.6352462
  IDEs:
    Android Studio: Version  3.6.0.0 AI-192.7142.36.36.6392135
  Languages:
    Java: 12.0.2 - C:\Program Files\Java\jdk-12.0.2\bin\javac.EXE
    Python: 3.7.7 - C:\Program Files (x86)\Python37-32\python.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.11.0 => 16.11.0
    react-native: 0.62.2 => 0.62.2
  npmGlobalPackages:
    *react-native*: Not Found

Steps To Reproduce

Create a TouchableNativeFeedback, make clicks on many different positions.

Expected Results

Ripple must be always on click position.

Snack, code example, screenshot, or link to a repository:

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  View,
  Text,
  TouchableNativeFeedback,
} from 'react-native'


const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <TouchableNativeFeedback background={TouchableNativeFeedback.Ripple('red')}>
        <View style={styles.buttonContainer}>
          <Text style={styles.textButton}>Touch me</Text>
        </View>
      </TouchableNativeFeedback>
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  buttonContainer: {
    width: 300,
    height: 70,
    justifyContent: 'center',
    borderColor: '#000',
    borderWidth: 2
  },
  textButton: {
    textAlign: 'center'
  }
})

export default App

[stale]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[stale]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please feel free to create a new issue with up-to-date information.

[Aparad]

Hi! Was this issue somehow resolved? I'm also experiencing this using react-native 0.63.2. I tried some UI libraries with custom components (like react-native-paper), but it seems to be a problem with react-native components which those libraries apparently rely on.

[vlad-the-compiler]

This has been bugging me for some time now and I've decided to peek at the sources for TouchableNativeFeedback.
It turns out it's just a plain old order-of-operations issue. The ripple effect is triggered before the hotspot position is being updated - as such, each ripple animation is always using the previous position, causing the described behaviour.
As a quick fix, go to node_modules\react-native\Libraries\Components\Touchable\TouchableNativeFeedback.js, and swap lines 188 and 189.

For reference, you should change
this._dispatchPressedStateChange(true);
this._dispatchHotspotUpdate(event);
into
this._dispatchHotspotUpdate(event);
this._dispatchPressedStateChange(true);

I'll add a PR.

[tucomel]

This has been bugging me for some time now and I've decided to peek at the sources for TouchableNativeFeedback.
It turns out it's just a plain old order-of-operations issue. The ripple effect is triggered before the hotspot position is being updated - as such, each ripple animation is always using the previous position, causing the described behaviour.
As a quick fix, go to node_modules\react-native\Libraries\Components\Touchable\TouchableNativeFeedback.js, and swap lines 188 and 189.

For reference, you should change
this._dispatchPressedStateChange(true);
this._dispatchHotspotUpdate(event);
into
this._dispatchHotspotUpdate(event);
this._dispatchPressedStateChange(true);

I'll add a PR.

THX! I solved my 1month problem with an interpretation of your answer.
I was setting setPressed(ispressed) before set a hotspot, with your answer I moved the setPressed right after set the hotspot and everything works like a charm really thanks! <3 <3 <3 <3 <3 <3 <3 <3