Add support for custom header transitions (#3075)

* Add support for custom header transitions

* Use default props for header transition default values

packages/react-navigation/docs/api/navigators/StackNavigator.md

@@ -222,3 +222,5 @@ const ModalNavigator = StackNavigator(
   }
 );
  ```
+
+Header transitions can also be configured using `headerLeftInterpolator`, `headerTitleInterpolator` and `headerRightInterpolator` fields under `transitionConfig`.

packages/react-navigation/src/TypeDefinition.js

@@ -300,6 +300,9 @@ export type HeaderProps = NavigationSceneRendererProps & {
   getScreenDetails: NavigationScene => NavigationScreenDetails<
     NavigationStackScreenOptions
   >,
+  leftInterpolator: (props: NavigationSceneRendererProps) => {},
+  titleInterpolator: (props: NavigationSceneRendererProps) => {},
+  rightInterpolator: (props: NavigationSceneRendererProps) => {},
 };
 
 /**
@@ -521,6 +524,11 @@ export type TransitionConfig = {
   // How to animate position and opacity of the screen
   // based on the value generated by the transitionSpec
   screenInterpolator?: (props: NavigationSceneRendererProps) => {},
+  // How to animate position and opacity of the header componetns
+  // based on the value generated by the transitionSpec
+  headerLeftInterpolator?: (props: NavigationSceneRendererProps) => {},
+  headerTitleInterpolator?: (props: NavigationSceneRendererProps) => {},
+  headerRightInterpolator?: (props: NavigationSceneRendererProps) => {},
   // The style of the container. Useful when a scene doesn't have
   // 100% opacity and the underlying container is visible.
   containerStyle?: ViewStyleProp,

packages/react-navigation/src/navigators/__tests__/__snapshots__/StackNavigator-test.js.snap

@@ -89,6 +89,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
           "width": 0,
         }
       }
+      leftInterpolator={[Function]}
       mode="float"
       navigation={
         Object {
@@ -107,6 +108,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
           },
         }
       }
+      rightInterpolator={[Function]}
       router={
         Object {
           "getActionForPathAndParams": [Function],
@@ -118,6 +120,7 @@ exports[`StackNavigator applies correct values when headerRight is present 1`] =
           "getStateForAction": [Function],
         }
       }
+      titleInterpolator={[Function]}
       transitionConfig={undefined}
     >
       <View
@@ -316,6 +319,7 @@ exports[`StackNavigator renders successfully 1`] = `
           "width": 0,
         }
       }
+      leftInterpolator={[Function]}
       mode="float"
       navigation={
         Object {
@@ -334,6 +338,7 @@ exports[`StackNavigator renders successfully 1`] = `
           },
         }
       }
+      rightInterpolator={[Function]}
       router={
         Object {
           "getActionForPathAndParams": [Function],
@@ -345,6 +350,7 @@ exports[`StackNavigator renders successfully 1`] = `
           "getStateForAction": [Function],
         }
       }
+      titleInterpolator={[Function]}
       transitionConfig={undefined}
     >
       <View

packages/react-navigation/src/views/CardStack/CardStack.js

@@ -163,6 +163,11 @@ class CardStack extends React.Component<Props> {
     }
 
     const renderHeader = header || ((props: *) => <Header {...props} />);
+    const {
+      headerLeftInterpolator,
+      headerTitleInterpolator,
+      headerRightInterpolator,
+    } = this._getTransitionConfig();
 
     // We need to explicitly exclude `mode` since Flow doesn't see
     // mode: headerMode override below and reports prop mismatch
@@ -173,6 +178,9 @@ class CardStack extends React.Component<Props> {
       scene,
       mode: headerMode,
       getScreenDetails: this._getScreenDetails,
+      leftInterpolator: headerLeftInterpolator,
+      titleInterpolator: headerTitleInterpolator,
+      rightInterpolator: headerRightInterpolator,
     });
   }
 

packages/react-navigation/src/views/Header/Header.js

@@ -49,6 +49,12 @@ const TITLE_OFFSET = Platform.OS === 'ios' ? 70 : 56;
 
 type Props = HeaderProps & { isLandscape: boolean };
 class Header extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    leftInterpolator: HeaderStyleInterpolator.forLeft,
+    titleInterpolator: HeaderStyleInterpolator.forCenter,
+    rightInterpolator: HeaderStyleInterpolator.forRight,
+  };
+
   static get HEIGHT() {
     console.warn(
       'Header.HEIGHT is deprecated and will be removed before react-navigation comes out of beta.'
@@ -183,7 +189,7 @@ class Header extends React.PureComponent<Props, State> {
       props,
       'left',
       this._renderLeftComponent,
-      HeaderStyleInterpolator.forLeft
+      this.props.leftInterpolator
     );
   }
 
@@ -210,7 +216,7 @@ class Header extends React.PureComponent<Props, State> {
       { ...props, style },
       'title',
       this._renderTitleComponent,
-      HeaderStyleInterpolator.forCenter
+      this.props.titleInterpolator
     );
   }
 
@@ -219,7 +225,7 @@ class Header extends React.PureComponent<Props, State> {
       props,
       'right',
       this._renderRightComponent,
-      HeaderStyleInterpolator.forRight
+      this.props.rightInterpolator
     );
   }