NavigationExperimental: Stop using absolute position for NavigationHeader.

Summary:
Not a API change, but this may break the layout of exisitng apps that
uses NavigationHeader.

For now, NavigationHeader uses absolute position, which makes it hard for
NavigationCardStack to determine the height of the scenes.

Theoretically, the height of the scenes would be the height of the cards
stack minus the height of the header.

That said, if we want to support the headers with different height (e.g.
MyIOSHeader or MyAndroidHeader), we're forced to expose the height of the
headers and manually compute the height of the scenes.

Alternatively, if the header does not use absolute position, the height
of the scenes can adjust automatically with flex box, and that's what this
commit is about to do.

Reviewed By: ericvicenti

Differential Revision: D3671119

fbshipit-source-id: 26e48f801da3661c5d7dce4752ba927621172f4a

Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-NavigationHeader-Tabs-example.js

@@ -359,7 +359,7 @@ const YourScene = createAppNavigationContainer(class extends Component {
 
   render(): ReactElement {
     return (
-      <ScrollView style={styles.scrollView}>
+      <ScrollView>
         <NavigationExampleRow
           text="Push Route"
           onPress={this._pushRoute}
@@ -463,9 +463,6 @@ const styles = StyleSheet.create({
   navigatorCardStack: {
     flex: 20,
   },
-  scrollView: {
-    marginTop: 64
-  },
   tabs: {
     flex: 1,
     flexDirection: 'row',

Examples/UIExplorer/js/NavigationExperimental/NavigationCardStack-example.js

@@ -165,7 +165,7 @@ class YourNavigator extends React.Component {
 class YourScene extends React.Component {
   render() {
     return (
-      <ScrollView style={styles.scrollView}>
+      <ScrollView>
         <NavigationExampleRow
           text={'route = ' + this.props.route.key}
         />
@@ -190,9 +190,6 @@ const styles = StyleSheet.create({
   navigator: {
     flex: 1,
   },
-  scrollView: {
-    marginTop: 64
-  },
 });
 
 module.exports = YourApplication;

Examples/UIExplorer/js/UIExplorerApp.ios.js

@@ -194,7 +194,6 @@ const styles = StyleSheet.create({
   },
   exampleContainer: {
     flex: 1,
-    paddingTop: NavigationHeader.HEIGHT,
   },
 });
 

Libraries/CustomComponents/NavigationExperimental/NavigationCardStack.js

@@ -75,8 +75,8 @@ type DefaultProps = {
  * A controlled navigation view that renders a stack of cards.
  *
  *     +------------+
- *   +-+            |
- * +-+ |            |
+ *   +-|   Header   |
+ * +-+ |------------|
  * | | |            |
  * | | |  Focused   |
  * | | |   Card     |
@@ -135,7 +135,7 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
       renderHeader
     } = this.props;
 
-    const overlay = renderHeader && renderHeader(props);
+    const header = renderHeader ? <View>{renderHeader(props)}</View> : null;
 
     const scenes = props.scenes.map(
      scene => this._renderScene({
@@ -145,13 +145,12 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
     );
 
     return (
-      <View
-        style={styles.container}>
+      <View style={styles.container}>
         <View
           style={styles.scenes}>
           {scenes}
         </View>
-        {overlay}
+        {header}
       </View>
     );
   }
@@ -187,6 +186,11 @@ class NavigationCardStack extends React.Component<DefaultProps, Props, void> {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
+    // Header is physically rendered after scenes so that Header won't be
+    // covered by the shadows of the scenes.
+    // That said, we'd have use `flexDirection: 'column-reverse'` to move
+    // Header above the scenes.
+    flexDirection: 'column-reverse',
   },
   scenes: {
     flex: 1,

Libraries/CustomComponents/NavigationExperimental/NavigationHeader.js

@@ -244,11 +244,6 @@ const styles = StyleSheet.create({
     elevation: 4,
     flexDirection: 'row',
     justifyContent: 'flex-start',
-    left: 0,
-    marginBottom: 16, // This is needed for elevation shadow
-    position: 'absolute',
-    right: 0,
-    top: 0,
   },
 
   title: {