mirror of
https://github.com/facebook/react-native.git
synced 2025-11-01 09:14:26 +00:00
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
This commit is contained in:
committed by
Facebook GitHub Bot
parent
73d02fadd2
commit
e4708d661b
@@ -203,6 +203,10 @@ class TouchableBounce extends React.Component<Props, State> {
|
||||
this.state.pressability.configure(this._createPressabilityConfig());
|
||||
}
|
||||
|
||||
componentDidMount(): mixed {
|
||||
this.state.pressability.configure(this._createPressabilityConfig());
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
this.state.pressability.reset();
|
||||
}
|
||||
|
||||
@@ -363,6 +363,7 @@ class TouchableHighlight extends React.Component<Props, State> {
|
||||
|
||||
componentDidMount(): void {
|
||||
this._isMounted = true;
|
||||
this.state.pressability.configure(this._createPressabilityConfig());
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: Props, prevState: State) {
|
||||
|
||||
+4
@@ -340,6 +340,10 @@ class TouchableNativeFeedback extends React.Component<Props, State> {
|
||||
this.state.pressability.configure(this._createPressabilityConfig());
|
||||
}
|
||||
|
||||
componentDidMount(): mixed {
|
||||
this.state.pressability.configure(this._createPressabilityConfig());
|
||||
}
|
||||
|
||||
componentWillUnmount(): void {
|
||||
this.state.pressability.reset();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user