From 54166342f01fc74236ba6146a4c0f604189017e4 Mon Sep 17 00:00:00 2001 From: Samuel Susla Date: Tue, 2 Jan 2024 10:57:15 -0800 Subject: [PATCH] fix TouchableWithoutFeedback and TouchableOpacity dropping onPress in React 18 (#42121) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/42121 ## Changelog: [General][Fixed] - TouchableWithoutFeedback and TouchableOpacity dropping touches with React 18. TouchableWithoutFeedback and TouchableOpacity do not trigger onPress when used with React 18. This is because it resets its pressability configuration in `componentWillUnmount`. This is fine, we want to stop deliver events and restart all timers when component is unmounted. ``` componentWillUnmount(): void { this.state.pressability.reset(); } ``` But TouchableWithoutFeedback and TouchableOpacity were not restarting the pressability configuration when component was mounted again. It was restarting the configuration in `componentDidUpdate`, which is not called when component is unmounted and mounted again. Reviewed By: fkgozali Differential Revision: D52388699 fbshipit-source-id: ef13194c6581c5d31d0f1cb465bfd0cf98d672ea --- .../Libraries/Components/Touchable/TouchableOpacity.js | 4 ++++ .../Components/Touchable/TouchableWithoutFeedback.js | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js index 95b3787905c082..789f0394343b11 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js @@ -314,6 +314,10 @@ class TouchableOpacity extends React.Component { } } + componentDidMount(): void { + this.state.pressability.configure(this._createPressabilityConfig()); + } + componentWillUnmount(): void { this.state.pressability.reset(); } diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js index 8d6a4787640baa..63112e7c80abd5 100755 --- a/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableWithoutFeedback.js @@ -189,6 +189,10 @@ class TouchableWithoutFeedback extends React.Component { this.state.pressability.configure(createPressabilityConfig(this.props)); } + componentDidMount(): mixed { + this.state.pressability.configure(createPressabilityConfig(this.props)); + } + componentWillUnmount(): void { this.state.pressability.reset(); }