[Navigator] Vertically hide disabled scenes and use pointerEvents="none"

ide · ide · commit bf7e2a85d08b · 2015-07-24T14:45:19.000-08:00
Summary: Hides disabled scenes using `top` instead of `left`, which fixes a bug with the native UITabBar. When the UITabBar's width is zeroed because the scene has `left: SCREEN_WIDTH, right: 0` applied, this triggers a bug with the kerning of the tab titles. Instead, zeroing the height by setting `top: SCREEN_HEIGHT` avoids the bug. Also applies `pointerEvents="none"` to disabled scenes so that views in the off-screen scenes definitely don't receive touches, which was occurring before. Fixes facebook#1401, fixes facebook#2011 Closes facebook#2104 Github Author: James Ide <ide@jameside.com>
diff --git a/Libraries/CustomComponents/Navigator/Navigator.js b/Libraries/CustomComponents/Navigator/Navigator.js
@@ -56,8 +56,9 @@ var PropTypes = React.PropTypes;
 var SCREEN_WIDTH = Dimensions.get('window').width;
 var SCREEN_HEIGHT = Dimensions.get('window').height;
 var SCENE_DISABLED_NATIVE_PROPS = {
+  pointerEvents: 'none',
   style: {
-    left: SCREEN_WIDTH,
+    top: SCREEN_HEIGHT,
     opacity: 0,
   },
 };
@@ -107,7 +108,7 @@ var styles = StyleSheet.create({
     top: 0,
   },
   disabledScene: {
-    left: SCREEN_WIDTH,
+    top: SCREEN_HEIGHT,
   },
   transitioner: {
     flex: 1,
@@ -529,15 +530,18 @@ var Navigator = React.createClass({
   _enableScene: function(sceneIndex) {
     // First, determine what the defined styles are for scenes in this navigator
     var sceneStyle = flattenStyle([styles.baseScene, this.props.sceneStyle]);
-    // Then restore the left value for this scene
+    // Then restore the pointer events and top value for this scene
     var enabledSceneNativeProps = {
-      left: sceneStyle.left,
+      pointerEvents: 'auto',
+      style: {
+        top: sceneStyle.top,
+      },
     };
     if (sceneIndex !== this.state.transitionFromIndex &&
         sceneIndex !== this.state.presentedIndex) {
       // If we are not in a transition from this index, make sure opacity is 0
       // to prevent the enabled scene from flashing over the presented scene
-      enabledSceneNativeProps.opacity = 0;
+      enabledSceneNativeProps.style.opacity = 0;
     }
     this.refs['scene_' + sceneIndex] &&
       this.refs['scene_' + sceneIndex].setNativeProps(enabledSceneNativeProps);
@@ -1021,8 +1025,10 @@ var Navigator = React.createClass({
 
   _renderScene: function(route, i) {
     var disabledSceneStyle = null;
+    var disabledScenePointerEvents = 'auto';
     if (i !== this.state.presentedIndex) {
       disabledSceneStyle = styles.disabledScene;
+      disabledScenePointerEvents = 'none';
     }
     return (
       <View
@@ -1031,6 +1037,7 @@ var Navigator = React.createClass({
         onStartShouldSetResponderCapture={() => {
           return (this.state.transitionFromIndex != null) || (this.state.transitionFromIndex != null);
         }}
+        pointerEvents={disabledScenePointerEvents}
         style={[styles.baseScene, this.props.sceneStyle, disabledSceneStyle]}>
         {this.props.renderScene(
           route,
