Skip to content

Commit

Permalink
Fix TouchableBounce, TouchableHighlight and TouchableNativeFeedback i…
Browse files Browse the repository at this point in the history
…n 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
  • Loading branch information
sammy-SC authored and blakef committed Jan 25, 2024
1 parent 220d8a5 commit d607040
Show file tree
Hide file tree
Showing 3 changed files with 9 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -339,6 +339,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();
}
Expand Down

0 comments on commit d607040

Please sign in to comment.