From eecdf7d356f5aa394aca18a46ca37e5cd8a10c4b Mon Sep 17 00:00:00 2001
From: Hedger Wang <hedger@fb.com>
Date: Wed, 6 Apr 2016 16:13:59 -0700
Subject: [PATCH] disable interaction during transition.

Summary:When navigating from one view to another you can still interact with
the current view. This means that a user can tap a button multiple times and trigger multiple transitions.

The view that is being transitioned off the screen should not be allowed to
receive any user interaction while it is being transitioned.

Reviewed By: javache

Differential Revision: D3143202

fb-gh-sync-id: cc033bbdf0cb9e717f62d2fcf751155406da846c
fbshipit-source-id: cc033bbdf0cb9e717f62d2fcf751155406da846c
---
 .../NavigationExperimental/NavigationCard.js  | 36 ++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/Libraries/CustomComponents/NavigationExperimental/NavigationCard.js b/Libraries/CustomComponents/NavigationExperimental/NavigationCard.js
index e023281d6..b01c3f034 100644
--- a/Libraries/CustomComponents/NavigationExperimental/NavigationCard.js
+++ b/Libraries/CustomComponents/NavigationExperimental/NavigationCard.js
@@ -80,24 +80,44 @@ class NavigationCard extends React.Component<any, Props, any> {
   }
 
   render(): ReactElement {
-    let {
-      style,
+    const {
       panHandlers,
       renderScene,
-      ...props,
+      style,
+      ...props, /* NavigationSceneRendererProps */
     } = this.props;
 
+    let viewStyle = null;
     if (style === undefined) {
       // fall back to default style.
-      style = NavigationCardStackStyleInterpolator.forHorizontal(props);
+      viewStyle = NavigationCardStackStyleInterpolator.forHorizontal(props);
+    } else {
+      viewStyle = style;
     }
-    if (panHandlers === undefined) {
-      // fall back to default pan handlers.
-      panHandlers = NavigationCardStackPanResponder.forHorizontal(props);
+
+    const  {
+      navigationState,
+      scene,
+    } = props;
+
+    const interactive = navigationState.index === scene.index && !scene.isStale;
+    const pointerEvents = interactive ? 'auto' : 'none';
+
+    let viewPanHandlers = null;
+    if (interactive) {
+      if (panHandlers === undefined) {
+        // fall back to default pan handlers.
+        viewPanHandlers = NavigationCardStackPanResponder.forHorizontal(props);
+      } else {
+        viewPanHandlers = panHandlers;
+      }
     }
 
     return (
-      <Animated.View {...panHandlers} style={[styles.main, style]}>
+      <Animated.View
+        {...viewPanHandlers}
+        pointerEvents={pointerEvents}
+        style={[styles.main, viewStyle]}>
         {renderScene(props)}
       </Animated.View>
     );