[react_native] JS files from D2001635: [react_native] Use hardware layers during adsmanager Navigator navigation

Author: astreet

Libraries/CustomComponents/Navigator/Navigator.js

@@ -494,6 +494,7 @@ var Navigator = React.createClass({
 
   _completeTransition: function() {
     if (this.spring.getCurrentValue() === 1) {
+      this._onAnimationEnd();
       var presentedIndex = this.state.toIndex;
       this.state.presentedIndex = presentedIndex;
       this.state.fromIndex = presentedIndex;
@@ -515,6 +516,7 @@ var Navigator = React.createClass({
       // For visual consistency, the from index is always used to configure the spring
       this.state.sceneConfigStack[this.state.fromIndex]
     );
+    this._onAnimationStart();
     this.state.isAnimating = true;
     this.spring.setVelocity(v);
     this.spring.setEndValue(1);
@@ -573,6 +575,34 @@ var Navigator = React.createClass({
     }
   },
 
+  _onAnimationStart: function() {
+    this._setRenderSceneToHarwareTextureAndroid(this.state.fromIndex, true);
+    this._setRenderSceneToHarwareTextureAndroid(this.state.toIndex, true);
+
+    var navBar = this._navBar;
+    if (navBar && navBar.onAnimationStart) {
+      navBar.onAnimationStart(this.state.fromIndex, this.state.toIndex);
+    }
+  },
+
+  _onAnimationEnd: function() {
+    this._setRenderSceneToHarwareTextureAndroid(this.state.fromIndex, false);
+    this._setRenderSceneToHarwareTextureAndroid(this.state.toIndex, false);
+
+    var navBar = this._navBar;
+    if (navBar && navBar.onAnimationEnd) {
+      navBar.onAnimationEnd(this.state.fromIndex, this.state.toIndex);
+    }
+  },
+
+  _setRenderSceneToHarwareTextureAndroid: function(sceneIndex, shouldRenderToHardwareTexture) {
+    var viewAtIndex = this.refs['scene_' + sceneIndex];
+    if (viewAtIndex === null || viewAtIndex === undefined) {
+      return;
+    }
+    viewAtIndex.setNativeProps({renderToHardwareTextureAndroid: shouldRenderToHardwareTexture});
+  },
+
   /**
    * Becomes the responder on touch start (capture) while animating so that it
    * blocks all touch interactions inside of it. However, this responder lock
@@ -610,6 +640,7 @@ var Navigator = React.createClass({
       this.state.fromIndex = this.state.presentedIndex;
       var gestureSceneDelta = this._deltaForGestureAction(this._activeGestureAction);
       this.state.toIndex = this.state.presentedIndex + gestureSceneDelta;
+      this.onAnimationStart();
     }
   },
 

Libraries/CustomComponents/Navigator/NavigatorBreadcrumbNavigationBar.js

@@ -138,6 +138,37 @@ var NavigatorBreadcrumbNavigationBar = React.createClass({
     }
   },
 
+  onAnimationStart: function(fromIndex, toIndex) {
+    var max = Math.max(fromIndex, toIndex);
+    var min = Math.min(fromIndex, toIndex);
+    for (var index = min; index <= max; index++) {
+      this._setRenderViewsToHardwareTextureAndroid(index, true);
+    }
+  },
+
+  onAnimationEnd: function(fromIndex, toIndex) {
+    var max = Math.max(fromIndex, toIndex);
+    var min = Math.min(fromIndex, toIndex);
+    for (var index = min; index <= max; index++) {
+      this._setRenderViewsToHardwareTextureAndroid(index, false);
+    }
+  },
+
+  _setRenderViewsToHardwareTextureAndroid: function(index, renderToHardwareTexture) {
+    var props = {
+      renderToHardwareTextureAndroid: renderToHardwareTexture,
+    };
+
+    this.refs['crumb_' + index].setNativeProps(props);
+    this.refs['icon_' + index].setNativeProps(props);
+    this.refs['separator_' + index].setNativeProps(props);
+    this.refs['title_' + index].setNativeProps(props);
+    var right = this.refs['right_' + index];
+    if (right) {
+      right.setNativeProps(props);
+    }
+  },
+
   render: function() {
     var navState = this.props.navState;
     var icons = navState && navState.routeStack.map(this._renderOrReturnBreadcrumb);