Fix glitches in Header when calling replace (#418)

* Change the way we store computed layout

We cannot store layouts under `index` because when calling `replace`, there are two competing layouts
on the same index, which will cause an infinite loop (are almost infinite) of flickering / jumping title.

* Disable transition at all when index didn't change

src/views/Header.js

@@ -52,7 +52,7 @@ type SubViewName = 'left' | 'title' | 'right';
 
 type HeaderState = {
   widths: {
-    [key: number]: number,
+    [key: string]: number,
   },
 };
 
@@ -225,14 +225,14 @@ class Header extends React.PureComponent<void, HeaderProps, HeaderState> {
         this.setState({
           widths: {
             ...this.state.widths,
-            [index]: e.nativeEvent.layout.width,
+            [key]: e.nativeEvent.layout.width,
           },
         });
       }
       : undefined;
 
     const titleWidth = name === 'left' || name === 'right'
-      ? this.state.widths[index]
+      ? this.state.widths[key]
       : undefined;
 
     return (

src/views/Transitioner.js

@@ -171,18 +171,15 @@ class Transitioner extends React.Component<*, Props, State> {
     const { timing } = transitionSpec;
     delete transitionSpec.timing;
 
-    const animations = [
-      timing(
-        progress,
-        {
-          ...transitionSpec,
-          toValue: 1,
-        },
-      ),
-    ];
-
-    if (indexHasChanged) {
-      animations.push(
+    const animations = indexHasChanged
+      ? [
+        timing(
+          progress,
+          {
+            ...transitionSpec,
+            toValue: 1,
+          },
+        ),
         timing(
           position,
           {
@@ -190,8 +187,9 @@ class Transitioner extends React.Component<*, Props, State> {
             toValue: nextProps.navigation.state.index,
           },
         ),
-      );
-    }
+      ]
+      : [];
+
     // update scenes and play the transition
     this._isTransitionRunning = true;
     this.setState(nextState, () => {