Skip to content

Commit d607040

Browse files
sammy-SCblakef
authored andcommitted
Fix TouchableBounce, TouchableHighlight and TouchableNativeFeedback in React 18 (#42133)
Summary: Pull Request resolved: #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 220d8a5 commit d607040

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
@@ -339,6 +339,10 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
339339
this.state.pressability.configure(this._createPressabilityConfig());
340340
}
341341

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

0 commit comments

Comments
 (0)