From bafc506f7c7d1ff49e3c19fdfdfa6da00075e1e8 Mon Sep 17 00:00:00 2001
From: Kyle Corbitt <kyle@corbt.com>
Date: Tue, 5 Apr 2016 11:32:15 -0700
Subject: [PATCH] Ignore Navigator touch events for background buttons

Summary:Currently, if the Navigator with the default `NavigatorNavigationBar` has two scenes on its `routeStack` and the bottom one defines a `RightButton` but the top one doesn't, a touch to the location of the underlying  `RightButton` will trigger its action.

This fix checks if the button's opacity is set to 0 (indicating it has been transitioned off the scene and shouldn't be interacted with) and ignores touch events if so.
Closes https://github.com/facebook/react-native/pull/5624

Differential Revision: D3139553

fb-gh-sync-id: 6d6da1459e289499b6d8769120a3b6114548c090
fbshipit-source-id: 6d6da1459e289499b6d8769120a3b6114548c090
---
 .../CustomComponents/Navigator/NavigatorNavigationBar.js    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js b/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js
index dd4a0e10b..c4607bd72 100644
--- a/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js
+++ b/Libraries/CustomComponents/Navigator/NavigatorNavigationBar.js
@@ -145,6 +145,7 @@ var NavigatorNavigationBar = React.createClass({
       var component = this._components[componentName].get(this.props.navState.routeStack[index]);
       var props = this._getReusableProps(componentName, index);
       if (component && interpolate[componentName](props.style, amount)) {
+        props.pointerEvents = props.style.opacity === 0 ? 'none' : 'box-none';
         component.setNativeProps(props);
       }
     }, this);
@@ -203,7 +204,8 @@ var NavigatorNavigationBar = React.createClass({
       return null;
     }
 
-    var initialStage = index === navStatePresentedIndex(this.props.navState) ?
+    var componentIsActive = index === navStatePresentedIndex(this.props.navState);
+    var initialStage = componentIsActive ?
       this.props.navigationStyles.Stages.Center :
       this.props.navigationStyles.Stages.Left;
     rendered = (
@@ -211,7 +213,7 @@ var NavigatorNavigationBar = React.createClass({
         ref={(ref) => {
           this._components[componentName] = this._components[componentName].set(route, ref);
         }}
-        pointerEvents="box-none"
+        pointerEvents={componentIsActive ? 'box-none' : 'none'}
         style={initialStage[componentName]}>
         {content}
       </View>