Skip to content

Commit 3a80268

Browse files
sammy-SCOthinn
authored andcommitted
Fix TouchableBounce, TouchableHighlight and TouchableNativeFeedback in React 18 (facebook#42133)
Summary: Pull Request resolved: facebook#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
1 parent 13771f9 commit 3a80268

File tree

3 files changed

+9
-0
lines changed

3 files changed

+9
-0
lines changed

packages/react-native/Libraries/Components/Touchable/TouchableBounce.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,10 @@ class TouchableBounce extends React.Component<Props, State> {
203203
this.state.pressability.configure(this._createPressabilityConfig());
204204
}
205205

206+
componentDidMount(): mixed {
207+
this.state.pressability.configure(this._createPressabilityConfig());
208+
}
209+
206210
componentWillUnmount(): void {
207211
this.state.pressability.reset();
208212
}

packages/react-native/Libraries/Components/Touchable/TouchableHighlight.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -363,6 +363,7 @@ class TouchableHighlight extends React.Component<Props, State> {
363363

364364
componentDidMount(): void {
365365
this._isMounted = true;
366+
this.state.pressability.configure(this._createPressabilityConfig());
366367
}
367368

368369
componentDidUpdate(prevProps: Props, prevState: State) {

packages/react-native/Libraries/Components/Touchable/TouchableNativeFeedback.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,6 +340,10 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
340340
this.state.pressability.configure(this._createPressabilityConfig());
341341
}
342342

343+
componentDidMount(): mixed {
344+
this.state.pressability.configure(this._createPressabilityConfig());
345+
}
346+
343347
componentWillUnmount(): void {
344348
this.state.pressability.reset();
345349
}

0 commit comments

Comments
 (0)