fix: properly set pointerEvents on the views

packages/stack/src/views/Header/HeaderContainer.tsx

@@ -60,7 +60,7 @@ export default function HeaderContainer({
           <View
             key={scene.route.key}
             onLayout={onLayout}
-            pointerEvents={isFocused ? 'box-none' : 'none'}
+            pointerEvents="box-none"
             accessibilityElementsHidden={!isFocused}
             importantForAccessibility={
               isFocused ? 'auto' : 'no-hide-descendants'

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

@@ -8,8 +8,10 @@ import {
 import { TransitionSpec, CardStyleInterpolator, Layout } from '../../types';
 import memoize from '../../utils/memoize';
 import StackGestureContext from '../../utils/StackGestureContext';
+import PointerEventsView from './PointerEventsView';
 
 type Props = ViewProps & {
+  active: boolean;
   closing?: boolean;
   transparent?: boolean;
   next?: Animated.Node<number>;
@@ -413,6 +415,7 @@ export default class Card extends React.Component<Props> {
 
   render() {
     const {
+      active,
       transparent,
       layout,
       current,
@@ -466,14 +469,16 @@ export default class Card extends React.Component<Props> {
                     pointerEvents="none"
                   />
                 ) : null}
-                <View
+                <PointerEventsView
+                  active={active}
+                  progress={this.props.current}
                   style={[
                     StyleSheet.absoluteFill,
                     transparent ? styles.transparent : styles.opaque,
                   ]}
                 >
                   {children}
-                </View>
+                </PointerEventsView>
               </Animated.View>
             </PanGestureHandler>
           </Animated.View>

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import { View, ViewProps } from 'react-native';
+import Animated from 'react-native-reanimated';
+
+type Binary = 0 | 1;
+
+type Props = ViewProps & {
+  active: boolean;
+  progress: Animated.Node<number>;
+  children: React.ReactNode;
+};
+
+const MIN_PROGRESS = 0.99;
+
+const TRUE = 1;
+const FALSE = 0;
+const NOOP = 0;
+
+const { block, greaterThan, cond, set, call, onChange } = Animated;
+
+/**
+ * Component that automatically computes the `pointerEvents` property
+ * whenever position changes.
+ */
+export default class PointerEventsView extends React.Component<Props> {
+  private pointerEventsEnabled = new Animated.Value<Binary>(
+    this.props.active ? TRUE : FALSE
+  );
+
+  private exec = block([
+    cond(
+      greaterThan(this.props.progress, MIN_PROGRESS),
+      cond(
+        this.pointerEventsEnabled,
+        NOOP,
+        set(this.pointerEventsEnabled, TRUE)
+      ),
+      cond(this.pointerEventsEnabled, set(this.pointerEventsEnabled, FALSE))
+    ),
+    onChange(
+      this.pointerEventsEnabled,
+      call([this.pointerEventsEnabled], ([value]) => {
+        const pointerEvents = this.props.active && value ? 'box-none' : 'none';
+
+        this.root && this.root.setNativeProps({ pointerEvents });
+      })
+    ),
+  ]);
+
+  private root: View | null = null;
+
+  render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { active, progress, ...rest } = this.props;
+
+    return (
+      <React.Fragment>
+        <Animated.Code exec={this.exec} />
+        <View ref={c => (this.root = c)} {...rest} />
+      </React.Fragment>
+    );
+  }
+}

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

@@ -192,7 +192,7 @@ export default class Stack extends React.Component<Props, State> {
           onLayout={this.handleLayout}
           pointerEvents={layout.height && layout.width ? 'box-none' : 'none'}
         >
-          {routes.map((route, index) => {
+          {routes.map((route, index, self) => {
             const focused = focusedRoute.key === route.key;
             const current = progress[route.key];
             const descriptor = descriptors[route.key];
@@ -201,6 +201,7 @@ export default class Stack extends React.Component<Props, State> {
             return (
               <Card
                 key={route.key}
+                active={index === self.length - 1}
                 transparent={transparentCard}
                 direction={direction}
                 layout={layout}

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

@@ -40,7 +40,7 @@ class StackView extends React.Component<Props, State> {
     const { navigation } = props;
     const { transitions } = navigation.state;
 
-    let { routes } = navigation.state;
+    let routes = navigation.state.routes.slice(0, navigation.state.index + 1);
 
     if (transitions.pushing.length) {
       // If there are multiple routes being pushed/popped, we'll encounter glitches