TouchableNativeFeedback ripple position bug

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

[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.

[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.