Rework the NavigationHeader

Summary:Add ability to specify custom left, right components, and title component. Style the `NavigationBar` according to the Platform.

Refer https://github.com/ericvicenti/navigation-rfc/pull/21

cc ericvicenti
Closes https://github.com/facebook/react-native/pull/5971

Differential Revision: D3080601

Pulled By: ericvicenti

fb-gh-sync-id: 7b921cd36b4c2ec1edf6f52629f1f9890d272dfd
shipit-source-id: 7b921cd36b4c2ec1edf6f52629f1f9890d272dfd

Examples/UIExplorer/NavigationExperimental/NavigationAnimatedExample.js

@@ -99,8 +99,10 @@ class NavigationAnimatedExample extends React.Component {
   _renderHeader(/*NavigationSceneRendererProps*/ props) {
     return (
       <NavigationHeader
-        {...props}
-        getTitle={state => state.key}
+        navigationProps={props}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{scene.navigationState.key}</NavigationHeader.Title>;
+        }}
       />
     );
   }
@@ -144,7 +146,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT,
   },
 });
 

Examples/UIExplorer/NavigationExperimental/NavigationCompositionExample.js

@@ -27,7 +27,6 @@ const {
 } = React;
 
 const {
-  AnimatedView: NavigationAnimatedView,
   CardStack: NavigationCardStack,
   Container: NavigationContainer,
   Header: NavigationHeader,
@@ -178,8 +177,10 @@ class ExampleTabScreen extends React.Component {
   _renderHeader(props: NavigationSceneRendererProps) {
     return (
       <NavigationHeader
-        {...props}
-        getTitle={state => stateTypeTitleMap(state)}
+        navigationProps={props}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{stateTypeTitleMap(scene.navigationState)}</NavigationHeader.Title>;
+        }}
       />
     );
   }
@@ -284,7 +285,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   scrollView: {
-    marginTop: 64
+    marginTop: NavigationHeader.HEIGHT
   },
   tabContent: {
     flex: 1,

Examples/UIExplorer/UIExplorerApp.ios.js

@@ -25,25 +25,19 @@ const UIExplorerStateTitleMap = require('./UIExplorerStateTitleMap');
 
 const {
   Alert,
-  Animated,
   AppRegistry,
   NavigationExperimental,
   SnapshotViewIOS,
   StyleSheet,
-  Text,
-  TouchableHighlight,
   View,
 } = React;
 
 const {
   CardStack: NavigationCardStack,
   Header: NavigationHeader,
-  Reducer: NavigationReducer,
   RootContainer: NavigationRootContainer,
 } = NavigationExperimental;
 
-import type { Value } from 'Animated';
-
 import type { NavigationSceneRendererProps } from 'NavigationTypeDefinition';
 
 import type { UIExplorerNavigationState } from './UIExplorerNavigationReducer';
@@ -127,9 +121,11 @@ class UIExplorerApp extends React.Component {
   _renderOverlay(props: NavigationSceneRendererProps): ReactElement {
     return (
       <NavigationHeader
-        {...props}
         key={'header_' + props.scene.navigationState.key}
-        getTitle={UIExplorerStateTitleMap}
+        navigationProps={props}
+        renderTitleComponent={(navigationProps, scene) => {
+          return <NavigationHeader.Title>{UIExplorerStateTitleMap(scene.navigationState)}</NavigationHeader.Title>;
+        }}
       />
     );
   }
@@ -165,7 +161,7 @@ const styles = StyleSheet.create({
   },
   exampleContainer: {
     flex: 1,
-    paddingTop: 60,
+    paddingTop: NavigationHeader.HEIGHT,
   },
 });