From 165cabb21f2419bde63acb4b52be2f4fb7a2ec2e Mon Sep 17 00:00:00 2001 From: Samuel Susla Date: Tue, 23 Apr 2024 03:20:03 -0700 Subject: [PATCH] reset animation state in TouchableOpacity and TouchableBounce (#44182) Summary: Pull Request resolved: https://github.com/facebook/react-native/pull/44182 ## Changelog: [iOS] [Fixed] - Fixed stale state on TouchableOpacity and TouchableBounce When TouchableOpacity and TouchableBounce are unmounted, we need to reset their state. This includes animation state. If we don't do that, view is unmounted on the mounting layer and animation will not be applied. This leaves view in undefined state. In TouchableOpacity, it is view with reduced opacity. TouchableBounce that is view with applied transform. This was reported in https://github.com/facebook/react-native/issues/44044 Reviewed By: rubennorte, cipolleschi Differential Revision: D56416571 fbshipit-source-id: 01214ec8a5e07c80a609e082b955a30305ad8396 --- .../Libraries/Components/Touchable/TouchableBounce.js | 1 + .../Libraries/Components/Touchable/TouchableOpacity.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js index 0a0103aa6c6..f0223835384 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableBounce.js @@ -209,6 +209,7 @@ class TouchableBounce extends React.Component { componentWillUnmount(): void { this.state.pressability.reset(); + this.state.scale.resetAnimation(); } } diff --git a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js index 8e6db941539..a11eb7cafe3 100644 --- a/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js +++ b/packages/react-native/Libraries/Components/Touchable/TouchableOpacity.js @@ -320,6 +320,7 @@ class TouchableOpacity extends React.Component { componentWillUnmount(): void { this.state.pressability.reset(); + this.state.anim.resetAnimation(); } }