Fix UIExplorer Search

Summary:
In UI explorer, the route is made of an object which look like this.

```
{key: 'AppList', filter: 'query string from the search box'}
```

When a new search query is enter, a new `filter` value is applied, and the key `AppList`
remains the same.

In NavigationScenesReducer, we should compare the routes with both their keys and references.

The current implementation only compares the keys, which unfortunately depends on the a weak
assumption that all routes immutable and keys are unique.

In UI Explore, the route key is always 'AppList', which makes sense since we use the key
to match the scene, and whenever a new search query is provides, a new route will be created.

Reviewed By: nicklockwood

Differential Revision: D3357023

fbshipit-source-id: a3c9e98092f5ce555e5dbb4cc806bab2e67d8014

Libraries/NavigationExperimental/Reducer/NavigationScenesReducer.js

@@ -12,6 +12,7 @@
 'use strict';
 
 const invariant = require('fbjs/lib/invariant');
+const shallowEqual = require('fbjs/lib/shallowEqual');
 
 import type {
   NavigationRoute,
@@ -55,6 +56,9 @@ function compareScenes(
   );
 }
 
+/**
+ * Whether two routes are the same.
+ */
 function areScenesShallowEqual(
   one: NavigationScene,
   two: NavigationScene,
@@ -63,10 +67,28 @@ function areScenesShallowEqual(
     one.key === two.key &&
     one.index === two.index &&
     one.isStale === two.isStale &&
-    one.route.key === two.route.key
+    areRoutesShallowEqual(one.route, two.route)
   );
 }
 
+/**
+ * Whether two routes are the same.
+ */
+function areRoutesShallowEqual(
+  one: ?NavigationRoute,
+  two: ?NavigationRoute,
+): boolean {
+  if (!one || !two) {
+    return one === two;
+  }
+
+  if (one.key !== two.key) {
+    return false;
+  }
+
+  return shallowEqual(one, two);
+}
+
 function NavigationScenesReducer(
   scenes: Array<NavigationScene>,
   nextState: NavigationState,

Libraries/NavigationExperimental/Reducer/__tests__/NavigationScenesReducer-test.js

@@ -113,7 +113,7 @@ describe('NavigationScenesReducer', () => {
     expect(scenes1).toBe(scenes2);
   });
 
-  it('gets different scenes', () => {
+  it('gets different scenes when keys are different', () => {
     const state1 = {
       index: 0,
       routes: [{key: '1'}, {key: '2'}],
@@ -129,6 +129,23 @@ describe('NavigationScenesReducer', () => {
     expect(scenes1).not.toBe(scenes2);
   });
 
+  it('gets different scenes when routes are different', () => {
+    const state1 = {
+      index: 0,
+      routes: [{key: '1', x: 1}, {key: '2', x: 2}],
+    };
+
+    const state2 = {
+      index: 0,
+      routes: [{key: '1', x: 3}, {key: '2', x: 4}],
+    };
+
+    const scenes1 = NavigationScenesReducer([], state1, null);
+    const scenes2 = NavigationScenesReducer(scenes1, state2, state1);
+    expect(scenes1).not.toBe(scenes2);
+  });
+
+
   it('pops scenes', () => {
     // Transition from ['1', '2', '3'] to ['1', '2'].
     const scenes = testTransition([