Reverted commit D3205106

Summary:
THis addresses the issue as reported at
https://github.com/facebook/react-native/issues/6732

Use a higher order component `NavigationPointerEventsContainer` to manager the
prop `pointerEvents` for `NavigationCard`.

The idea is that the scene's content should not be interactive while the scene is
transitioning.

Reviewed By: ericvicenti

Differential Revision: D3205106

fb-gh-sync-id: db7172941155f34447495199d2c029f5c7e75f30
fbshipit-source-id: db7172941155f34447495199d2c029f5c7e75f30

Libraries/CustomComponents/NavigationExperimental/NavigationCard.js

@@ -38,7 +38,6 @@ const NavigationCardStackStyleInterpolator = require('NavigationCardStackStyleIn
 const NavigationContainer = require('NavigationContainer');
 const NavigationPagerPanResponder = require('NavigationPagerPanResponder');
 const NavigationPagerStyleInterpolator = require('NavigationPagerStyleInterpolator');
-const NavigationPointerEventsContainer = require('NavigationPointerEventsContainer');
 const NavigationPropTypes = require('NavigationPropTypes');
 const React = require('React');
 const ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin');
@@ -52,30 +51,26 @@ import type  {
 } from 'NavigationTypeDefinition';
 
 type Props = NavigationSceneRendererProps & {
-  onComponentRef: (ref: any) => void,
-  panHandlers: ?NavigationPanPanHandlers,
-  pointerEvents: string,
-  renderScene: NavigationSceneRenderer,
   style: any,
+  panHandlers: ?NavigationPanPanHandlers,
+  renderScene: NavigationSceneRenderer,
 };
 
 const {PropTypes} = React;
 
+const propTypes = {
+  ...NavigationPropTypes.SceneRenderer,
+  style: PropTypes.any,
+  panHandlers: NavigationPropTypes.panHandlers,
+  renderScene: PropTypes.func.isRequired,
+};
+
 /**
  * Component that renders the scene as card for the <NavigationCardStack />.
  */
 class NavigationCard extends React.Component<any, Props, any> {
   props: Props;
 
-  static propTypes = {
-    ...NavigationPropTypes.SceneRenderer,
-    onComponentRef: PropTypes.func.isRequired,
-    panHandlers: NavigationPropTypes.panHandlers,
-    pointerEvents: PropTypes.string.isRequired,
-    renderScene: PropTypes.func.isRequired,
-    style: PropTypes.any,
-  };
-
   shouldComponentUpdate(nextProps: Props, nextState: any): boolean {
     return ReactComponentWithPureRenderMixin.shouldComponentUpdate.call(
       this,
@@ -87,25 +82,41 @@ class NavigationCard extends React.Component<any, Props, any> {
   render(): ReactElement {
     const {
       panHandlers,
-      pointerEvents,
       renderScene,
       style,
       ...props, /* NavigationSceneRendererProps */
     } = this.props;
 
-    const viewStyle = style === undefined ?
-      NavigationCardStackStyleInterpolator.forHorizontal(props) :
-      style;
+    let viewStyle = null;
+    if (style === undefined) {
+      // fall back to default style.
+      viewStyle = NavigationCardStackStyleInterpolator.forHorizontal(props);
+    } else {
+      viewStyle = style;
+    }
 
-    const viewPanHandlers = panHandlers === undefined ?
-      NavigationCardStackPanResponder.forHorizontal(props) :
-      panHandlers;
+    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
         {...viewPanHandlers}
         pointerEvents={pointerEvents}
-        ref={this.props.onComponentRef}
         style={[styles.main, viewStyle]}>
         {renderScene(props)}
       </Animated.View>
@@ -113,6 +124,8 @@ class NavigationCard extends React.Component<any, Props, any> {
   }
 }
 
+NavigationCard.propTypes = propTypes;
+
 const styles = StyleSheet.create({
   main: {
     backgroundColor: '#E9E9EF',
@@ -128,13 +141,13 @@ const styles = StyleSheet.create({
   },
 });
 
-NavigationCard = NavigationPointerEventsContainer.create(NavigationCard);
-NavigationCard = NavigationContainer.create(NavigationCard);
+
+const NavigationCardContainer = NavigationContainer.create(NavigationCard);
 
 // Export these buil-in interaction modules.
-NavigationCard.CardStackPanResponder = NavigationCardStackPanResponder;
-NavigationCard.CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
-NavigationCard.PagerPanResponder = NavigationPagerPanResponder;
-NavigationCard.PagerStyleInterpolator = NavigationPagerStyleInterpolator;
+NavigationCardContainer.CardStackPanResponder = NavigationCardStackPanResponder;
+NavigationCardContainer.CardStackStyleInterpolator = NavigationCardStackStyleInterpolator;
+NavigationCardContainer.PagerPanResponder = NavigationPagerPanResponder;
+NavigationCardContainer.PagerStyleInterpolator = NavigationPagerStyleInterpolator;
 
-module.exports = NavigationCard;
+module.exports = NavigationCardContainer;