diff --git a/packages/stack/package.json b/packages/stack/package.json index 1f7feed9..8272a8a8 100644 --- a/packages/stack/package.json +++ b/packages/stack/package.json @@ -45,7 +45,7 @@ "devDependencies": { "@react-native-community/bob": "^0.10.0", "@react-native-community/masked-view": "^0.1.7", - "@react-navigation/stack": "^5.6.1", + "@react-navigation/stack": "^5.7.0", "@types/color": "^3.0.1", "@types/react": "^16.9.23", "@types/react-native": "^0.61.22", diff --git a/packages/stack/src/vendor/views/Stack/Card.tsx b/packages/stack/src/vendor/views/Stack/Card.tsx index 01701525..908c9d3f 100755 --- a/packages/stack/src/vendor/views/Stack/Card.tsx +++ b/packages/stack/src/vendor/views/Stack/Card.tsx @@ -97,6 +97,7 @@ export default class Card extends React.Component { componentDidMount() { this.animate({ closing: this.props.closing }); + this.isCurrentlyMounted = true; } componentDidUpdate(prevProps: Props) { @@ -115,8 +116,11 @@ export default class Card extends React.Component { this.inverted.setValue(getInvertedMultiplier(gestureDirection)); } + const toValue = this.getAnimateToValue(this.props); + if ( - this.getAnimateToValue(this.props) !== this.getAnimateToValue(prevProps) + this.getAnimateToValue(prevProps) !== toValue || + this.lastToValue !== toValue ) { // We need to trigger the animation when route was closed // Thr route might have been closed by a `POP` action or by a gesture @@ -128,9 +132,12 @@ export default class Card extends React.Component { } componentWillUnmount() { + this.isCurrentlyMounted = false; this.handleEndInteraction(); } + private isCurrentlyMounted = false; + private isClosing = new Animated.Value(FALSE); private inverted = new Animated.Value( @@ -148,6 +155,8 @@ export default class Card extends React.Component { private pendingGestureCallback: any; + private lastToValue: number | undefined; + private animate = ({ closing, velocity, @@ -168,6 +177,8 @@ export default class Card extends React.Component { closing, }); + this.lastToValue = toValue; + const spec = closing ? transitionSpec.close : transitionSpec.open; const animation = @@ -196,6 +207,11 @@ export default class Card extends React.Component { } else { onOpen(); } + + if (this.isCurrentlyMounted) { + // Make sure to re-open screen if it wasn't removed + this.forceUpdate(); + } } }); }; @@ -301,10 +317,13 @@ export default class Card extends React.Component { if (closing) { // We call onClose with a delay to make sure that the animation has already started // This will make sure that the state update caused by this doesn't affect start of animation - this.pendingGestureCallback = (setTimeout( - onClose, - 32 - ) as any) as number; + this.pendingGestureCallback = (setTimeout(() => { + onClose(); + + // Trigger an update after we dispatch the action to remove the screen + // This will make sure that we check if the screen didn't get removed so we can cancel the animation + this.forceUpdate(); + }, 32) as any) as number; } onGestureEnd?.(); diff --git a/yarn.lock b/yarn.lock index 26d48ea2..9d495991 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3202,10 +3202,10 @@ resolved "https://registry.yarnpkg.com/@react-native-community/masked-view/-/masked-view-0.1.7.tgz#a65ce0702f55cb67fd777995de6fc7b3e5781903" integrity sha512-9KbP7LTLFz9dx1heURJbO6nuVMdSjDez8znlrUzaB1nUwKVsTTwlKRuHxGUYIIkReLWrJQeCv9tidy+84z2eCw== -"@react-navigation/stack@^5.6.1": - version "5.6.1" - resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.6.1.tgz#9cdb64cfa1b8fc3d9c7204589effce7278bf6d2e" - integrity sha512-pbiNHKGa+7awvh+mjuvU6L05s/6qYxxs+4tY5ldCsMrqP+PoYW8/avY0lJBaByAfTZmJbHAZrtcC+rFic8NAnA== +"@react-navigation/stack@^5.7.0": + version "5.7.0" + resolved "https://registry.yarnpkg.com/@react-navigation/stack/-/stack-5.7.0.tgz#ba8d86919554c9c758e79493b0c828e10faec5d2" + integrity sha512-56Q83c5jjVyge++3FjVrvO3QvXyt5LJjFq8txE+qyvdJ4C+oK0b7vQ70ZP5fhXAUCgSvYnHAcV/DVBFz3kiDsg== dependencies: color "^3.1.2" react-native-iphone-x-helper "^1.2.1"