diff --git a/packages/stack/src/views/Stack/Card.tsx b/packages/stack/src/views/Stack/Card.tsx index ac5b5c0d..2e8bbadc 100755 --- a/packages/stack/src/views/Stack/Card.tsx +++ b/packages/stack/src/views/Stack/Card.tsx @@ -127,9 +127,11 @@ export default class Card extends React.Component { } private isVisible = new Value(TRUE); + private isVisibleValue: Binary = TRUE; private nextIsVisible = new Value(UNSET); private isClosing = new Value(FALSE); + private noAnimationStartedSoFar = true; private isRunningAnimation = false; private clock = new Clock(); @@ -196,6 +198,7 @@ export default class Card extends React.Component { startClock(this.clock), call([this.isVisible], ([value]: ReadonlyArray) => { const { onTransitionStart } = this.props; + this.noAnimationStartedSoFar = false; this.isRunningAnimation = true; onTransitionStart && onTransitionStart({ closing: !value }); }), @@ -358,6 +361,10 @@ export default class Card extends React.Component { ), ] ), + onChange( + this.isVisible, + call([this.isVisible], ([isVisible]) => (this.isVisibleValue = isVisible)) + ), ]); private handleGestureEventHorizontal = Animated.event([ @@ -386,8 +393,12 @@ export default class Card extends React.Component { // It might sometimes happen than animation will be unmounted // during running. However, we need to invoke listener onClose // manually in this case - if (this.isRunningAnimation) { - this.props.onClose(false); + if (this.isRunningAnimation || this.noAnimationStartedSoFar) { + if (this.isVisibleValue) { + this.props.onOpen(false); + } else { + this.props.onClose(false); + } } } diff --git a/packages/stack/src/views/Stack/StackView.tsx b/packages/stack/src/views/Stack/StackView.tsx index 05793b77..3293a569 100644 --- a/packages/stack/src/views/Stack/StackView.tsx +++ b/packages/stack/src/views/Stack/StackView.tsx @@ -27,7 +27,7 @@ type State = { routes: Route[]; // List of routes being opened, we need to animate pushing of these new routes opening: string[]; - // List of routes being closed, we need to animate popping of thse routes + // List of routes being closed, we need to animate popping of these routes closing: string[]; // List of routes being replaced, we need to keep a copy until the new route animates in replacing: string[]; @@ -103,7 +103,7 @@ class StackView extends React.Component { !opening.includes(nextFocusedRoute.key) ) { // In this case, we need to animate pushing the focused route - // We don't care about animating any other addded routes because they won't be visible + // We don't care about animating any other added routes because they won't be visible opening = [...opening, nextFocusedRoute.key]; closing = closing.filter(key => key !== nextFocusedRoute.key); @@ -250,6 +250,7 @@ class StackView extends React.Component { : state.routes, opening: state.opening.filter(key => key !== route.key), replacing: [], + closing: state.closing.filter(key => key !== route.key), })); }; @@ -262,7 +263,7 @@ class StackView extends React.Component { // @ts-ignore this.setState(state => ({ routes: state.routes.filter(r => r.key !== route.key), - opening: state.closing.filter(key => key !== route.key), + opening: state.opening.filter(key => key !== route.key), closing: state.closing.filter(key => key !== route.key), })); };