[ReactNative] Remove Navigator onItemRef

Summary:
Re-landing D2229686 after fixing bugs mentioned in D2250586

onItemRef is old and no longer needed now that the parent renders the scenes. This removes it from Navigator and all of our clients.

This is a breaking change to users of Navigator, but it is easy to transition to a ref in renderScene instead

Libraries/CustomComponents/Navigator/Navigator.js

@@ -67,6 +67,24 @@ function getuid() {
   return __uid++;
 }
 
+function getRouteID(route) {
+  if (route === null || typeof route !== 'object') {
+    return String(route);
+  }
+
+  var key = '__navigatorRouteID';
+
+  if (!route.hasOwnProperty(key)) {
+    Object.defineProperty(route, key, {
+      enumerable: false,
+      configurable: false,
+      writable: false,
+      value: getuid(),
+    });
+  }
+  return route[key];
+}
+
 // styles moved to the top of the file so getDefaultProps can refer to it
 var styles = StyleSheet.create({
   container: {
@@ -220,11 +238,6 @@ var Navigator = React.createClass({
      */
     onDidFocus: PropTypes.func,
 
-    /**
-     * Will be called with (ref, indexInStack, route) when the scene ref changes
-     */
-    onItemRef: PropTypes.func,
-
     /**
      * Optionally provide a navigation bar that persists across scene
      * transitions
@@ -318,7 +331,6 @@ var Navigator = React.createClass({
       onPanResponderMove: this._handlePanResponderMove,
       onPanResponderTerminate: this._handlePanResponderTerminate,
     });
-    this._itemRefs = {};
     this._interactionHandle = null;
     this._emitWillFocus(this.state.routeStack[this.state.presentedIndex]);
   },
@@ -1006,22 +1018,10 @@ var Navigator = React.createClass({
     return this.state.routeStack.slice();
   },
 
-  _handleItemRef: function(itemId, route, ref) {
-    this._itemRefs[itemId] = ref;
-    var itemIndex = this.state.idStack.indexOf(itemId);
-    if (itemIndex === -1) {
-      return;
-    }
-    this.props.onItemRef && this.props.onItemRef(ref, itemIndex, route);
-  },
-
   _cleanScenesPastIndex: function(index) {
     var newStackLength = index + 1;
     // Remove any unneeded rendered routes.
     if (newStackLength < this.state.routeStack.length) {
-      this.state.idStack.slice(newStackLength).map((removingId) => {
-        this._itemRefs[removingId] = null;
-      });
       this.setState({
         sceneConfigStack: this.state.sceneConfigStack.slice(0, newStackLength),
         idStack: this.state.idStack.slice(0, newStackLength),
@@ -1031,38 +1031,22 @@ var Navigator = React.createClass({
   },
 
   _renderScene: function(route, i) {
-    var child = this.props.renderScene(
-      route,
-      this
-    );
     var disabledSceneStyle = null;
     if (i !== this.state.presentedIndex) {
       disabledSceneStyle = styles.disabledScene;
     }
-    var originalRef = child.ref;
-    if (originalRef != null && typeof originalRef !== 'function') {
-      console.warn(
-        'String refs are not supported for navigator scenes. Use a callback ' +
-        'ref instead. Ignoring ref: ' + originalRef
-      );
-      originalRef = null;
-    }
     return (
       <View
-        key={this.state.idStack[i]}
+        key={'scene_' + getRouteID(route)}
         ref={'scene_' + i}
         onStartShouldSetResponderCapture={() => {
           return (this.state.transitionFromIndex != null) || (this.state.transitionFromIndex != null);
         }}
         style={[styles.baseScene, this.props.sceneStyle, disabledSceneStyle]}>
-        {React.cloneElement(child, {
-          ref: component => {
-            this._handleItemRef(this.state.idStack[i], route, component);
-            if (originalRef) {
-              originalRef(component);
-            }
-          }
-        })}
+        {this.props.renderScene(
+          route,
+          this
+        )}
       </View>
     );
   },