fix: bunch of fixes regarding reliability of callbacks

packages/stack/src/views/Stack/Card.tsx

@@ -127,9 +127,11 @@ export default class Card extends React.Component<Props> {
   }
 
   private isVisible = new Value<Binary>(TRUE);
+  private isVisibleValue: Binary = TRUE;
   private nextIsVisible = new Value<Binary | -1>(UNSET);
 
   private isClosing = new Value<Binary>(FALSE);
+  private noAnimationStartedSoFar = true;
   private isRunningAnimation = false;
 
   private clock = new Clock();
@@ -196,6 +198,7 @@ export default class Card extends React.Component<Props> {
         startClock(this.clock),
         call([this.isVisible], ([value]: ReadonlyArray<Binary>) => {
           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<Props> {
         ),
       ]
     ),
+    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<Props> {
     // 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);
+      }
     }
   }
 

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<Props, State> {
           !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<Props, State> {
         : 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<Props, State> {
     // @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),
     }));
   };