Update the guide for Default Navigation Options (#25)

docs/guides/Screen-Nav-Options.md

@@ -48,52 +48,51 @@ Unlike the other nav options which are only utilized by the navigator view, the
 
 #### Default Navigation Options
 
-You can configure the default `navigationOptions` for all the screens within particular navigator to save you needing
-to specify same properties all over the place.
+It's very common to define `navigationOptions` on a screen, but sometimes it is useful to define `navigationOptions` on a navigator too. 
 
-```js
-StackNavigator(routeConfig, {
-  navigationOptions: {
-    header: {
-      visible: false,
-    },
-  },
-});
+Imagine the following scenario: 
+Your `TabNavigator` represents one of the screens in the app, and is nested within a top-level `StackNavigator`:
+
+```
+StackNavigator:
+  - route1: A screen
+  - route2: A TabNavigator
 ```
 
-The above example will automatically hide navigation bar on all screens.
-
-To override it on per-screen basis, you could define `navigationOptions` on a component itself:
+Now, when `route2` is active, you would like to hide the header. It's easy to hide the header for `route1`, and it should also be easy to do it for `route2`. This is what Default Navigation Options are for - they are simply `navigationOptions` set on a navigator:
 
 ```js
-class ProfileScreen extends React.Component {
-  static navigationOptions = {
-    header: {
-      title: 'Profile Screen',
-    },
-  }
+TabNavigator({
+  profile: ProfileScreen,
   ...
-}
+}, {
+  navigationOptions: {
+     header: {
+       visible: false,
+     },
+   },
+ });
 ```
 
-When `navigationOptions` are present on a component like in the above example, default settings are completely ignored.
-
-**Extending defaults:** In order to extend default config with screen-specific properties instead of overriding it, you
-could dynamically configure an option:
+Note that you can still decide to **also** specify the `navigationOptions` on the screens at the leaf level - e.g.  the `ProfileScreen` above. The `navigationOptions` from the screen will be merged key-by-key with the default options coming from the navigator. Whenever both the navigator and screen define the same option (e.g. `header`), the screen wins. Therefore, you could make the header visible again when `ProfileScreen` is active.
 
+**Extending defaults:** In order to extend default config with screen-specific properties instead of overriding it, you configure an option like this:
+ 
 ```js
 class ProfileScreen extends React.Component {
   static navigationOptions = {
     header: (navigation, defaultHeader) => ({
       ...defaultHeader,
-      title: 'Profile Screen',
+      visible: true,
+      color: 'blue',
     }),
   }
   ...
 }
 ```
+ 
+The 2nd argument passed to the function are the default values for the `header` as defined on the navigator.
 
-The 2nd argument passed to the function is the default config as found on the navigator.
 
 ## Tab Navigation Options