Introducing flat options (#984)

* Initial commit

* Remove HybridExample (#985)

* Remove HybridExample

* Remove last mention of HelloHybrid

* Remove console log

* Fix flow and example

* Fix routers api docs

* Keep options in single place

* chore

* Fix styling

* Organise miscs

* Better flow type for screen options

* Flow test website and add more types to options

* navigationOptions instead of prevOptions makes more sense

* Fixes

* Fix up docs

* Fix

* Update route decl

* Provide error when removed API is used

* Remove lock

* Add validators

* Make StacksOverTabs config valid again

* Do not return

* Fix redbox

docs/api/navigators/StackNavigator.md

@@ -57,9 +57,9 @@ StackNavigator({
     // The action and route params are extracted from the path.
 
     // Optional: Override the `navigationOptions` for the screen
-    navigationOptions: {
-      title: ({state}) => `${state.params.username}'s Profile'`,
-    },
+    navigationOptions: ({navigation}) => ({
+      title: `${navigation.state.params.username}'s Profile'`,
+    }),
   },
 
   ...MyOtherRoutes,
@@ -91,44 +91,49 @@ Visual options:
 
 ### Screen Navigation Options
 
-Usually you define static `navigationOptions` on your screen component. For example:
+#### `title`
 
-```jsx
-class ProfileScreen extends React.Component {
+Generic title that can be used as a fallback for `headerTitle` and `tabBarLabel`
 
-  static navigationOptions = {
+#### `headerVisible`
 
-    title: ({ state }) => `${state.params.name}'s Profile!`,
+True or false to show or hide the header. Only works when `headerMode` is `screen`. Default value is `true`.
 
-    header: ({ state, setParams }) => ({
-      // Render a button on the right side of the header
-      // When pressed switches the screen to edit mode.
-      right: (
-        <Button
-          title={state.params.editing ? 'Done' : 'Edit'}
-          onPress={() => setParams({editing: state.params.editing ? false : true})}
-        />
-      ),
-    }),
-  };
-  ...
-```
+#### `headerTitle`
 
-All `navigationOptions` for the `StackNavigator`:
+String or React Element used by the header. Defaults to scene `title`
 
-- `title` - a title (string) of the scene
-- `header` - a config object for the header bar:
-  - `visible` - Boolean toggle of header visibility. Only works when `headerMode` is `screen`.
-  - `title` - String or React Element used by the header. Defaults to scene `title`
-  - `backTitle` - Title string used by the back button on iOS or `null` to disable label. Defaults to scene `title`
-  - `right` - React Element to display on the right side of the header
-  - `left` - React Element to display on the left side of the header
-  - `style` - Style object for the header
-  - `titleStyle` - Style object for the title component
-  - `tintColor` - Tint color for the header
-  - `pressColorAndroid` - Color for material ripple (Android >= 5.0 only)
-  - `cardStack` - a config object for the card stack:
-  - `gesturesEnabled` - Whether you can use gestures to dismiss this screen. Defaults to true on iOS, false on Android
+#### `headerBackTitle`
+
+Title string used by the back button on iOS or `null` to disable label. Defaults to scene `title`
+
+#### `headerRight`
+
+String or React Element to display on the right side of the header
+
+#### `headerLeft`
+
+String or React Element to display on the left side of the header
+
+#### `headerStyle`
+
+Style object for the header
+
+#### `headerTitleStyle`
+
+Style object for the title component
+
+#### `headerTintColor`
+
+Tint color for the header
+
+#### `headerPressColorAndroid`
+
+Color for material ripple (Android >= 5.0 only)
+
+#### `gesturesEnabled`
+
+Whether you can use gestures to dismiss this screen. Defaults to true on iOS, false on Android
 
 ### Navigator Props