Skip to content

Commit 5416634

Browse files
sammy-SCfacebook-github-bot
authored andcommitted
fix TouchableWithoutFeedback and TouchableOpacity dropping onPress in React 18 (#42121)
Summary: Pull Request resolved: #42121 ## Changelog: [General][Fixed] - TouchableWithoutFeedback and TouchableOpacity dropping touches with React 18. TouchableWithoutFeedback and TouchableOpacity 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 TouchableWithoutFeedback and TouchableOpacity 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: D52388699 fbshipit-source-id: ef13194c6581c5d31d0f1cb465bfd0cf98d672ea
1 parent f1a7f08 commit 5416634

File tree

2 files changed

+8
-0
lines changed

2 files changed

+8
-0
lines changed

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -314,6 +314,10 @@ class TouchableOpacity extends React.Component<Props, State> {
314314
}
315315
}
316316

317+
componentDidMount(): void {
318+
this.state.pressability.configure(this._createPressabilityConfig());
319+
}
320+
317321
componentWillUnmount(): void {
318322
this.state.pressability.reset();
319323
}

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -189,6 +189,10 @@ class TouchableWithoutFeedback extends React.Component<Props, State> {
189189
this.state.pressability.configure(createPressabilityConfig(this.props));
190190
}
191191

192+
componentDidMount(): mixed {
193+
this.state.pressability.configure(createPressabilityConfig(this.props));
194+
}
195+
192196
componentWillUnmount(): void {
193197
this.state.pressability.reset();
194198
}

0 commit comments

Comments
 (0)