From e4708d661bf3d01ec857635f04a4aabf9d954a5e Mon Sep 17 00:00:00 2001 From: Samuel Susla Date: Thu, 4 Jan 2024 02:29:04 -0800 Subject: [PATCH] Fix TouchableBounce, TouchableHighlight and TouchableNativeFeedback in React 18 (#42133) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/42133 ## Changelog: [General][Fixed] - TouchableBounce, TouchableHighlight and TouchableNativeFeedback dropping touches with React 18. TouchableBounce, TouchableHighlight and TouchableNativeFeedback 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 TouchableBounce, TouchableHighlight and TouchableNativeFeedback 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: D52514643 fbshipit-source-id: 0d6ae4bb7c2a797cc443181459c5614da0ecfc7a --- .../Libraries/Components/Touchable/TouchableBounce.js | 4 ++++ .../Libraries/Components/Touchable/TouchableHighlight.js | 1 + .../Libraries/Components/Touchable/TouchableNativeFeedback.js | 4 ++++ 3 files changed, 9 insertions(+) diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js index 4fcbe801e16051..0a0103aa6c6e02 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js @@ -203,6 +203,10 @@ class TouchableBounce extends React.Component { this.state.pressability.configure(this._createPressabilityConfig()); } + componentDidMount(): mixed { + this.state.pressability.configure(this._createPressabilityConfig()); + } + componentWillUnmount(): void { this.state.pressability.reset(); } diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js index 998a7d02f3b45a..f2f9c4e7829a4b 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js @@ -363,6 +363,7 @@ class TouchableHighlight extends React.Component { componentDidMount(): void { this._isMounted = true; + this.state.pressability.configure(this._createPressabilityConfig()); } componentDidUpdate(prevProps: Props, prevState: State) { diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js b/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js index f20e85a654ff23..0fb5f86702e417 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js @@ -340,6 +340,10 @@ class TouchableNativeFeedback extends React.Component { this.state.pressability.configure(this._createPressabilityConfig()); } + componentDidMount(): mixed { + this.state.pressability.configure(this._createPressabilityConfig()); + } + componentWillUnmount(): void { this.state.pressability.reset(); }