From b805978d9b29f6c4c6a2b3a520df42b3a2ab1931 Mon Sep 17 00:00:00 2001
From: Jeremy Lu <forlist66@gmail.com>
Date: Thu, 2 Feb 2017 05:27:05 +0800
Subject: [PATCH] Add `screenProps` example and improve docs (#101)

---
 docs/api/navigators/DrawerNavigator.md | 24 +++++++++++++++++-----
 docs/api/navigators/StackNavigator.md  | 28 +++++++++++++++++---------
 docs/api/navigators/TabNavigator.md    | 28 +++++++++++++++++++++++---
 3 files changed, 63 insertions(+), 17 deletions(-)

diff --git a/docs/api/navigators/DrawerNavigator.md b/docs/api/navigators/DrawerNavigator.md
index 074f75a..18ed230 100644
--- a/docs/api/navigators/DrawerNavigator.md
+++ b/docs/api/navigators/DrawerNavigator.md
@@ -79,7 +79,12 @@ this.props.navigation.navigate('DrawerClose'); // close drawer
 DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
 ```
 
-### Drawer Navigator Options
+### RouteConfigs
+
+The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see [example](https://github.com/coodoo/react-navigation/blob/master/docs/api/navigators/StackNavigator.md#routeconfigs) from `StackNavigator`.
+
+
+### DrawerNavigatorConfig
 
 - `drawerWidth` - Width of the drawer
 - `drawerPosition` - Options are `left` or `right`. Default is `left` position.
@@ -101,7 +106,7 @@ Several options get passed to the underlying router to modify navigation logic:
 - `inactiveBackgroundColor` - background color of the inactive label
 - `style` - style object for the content section
 
-Example:
+#### Example:
 
 ```js
 contentOptions: {
@@ -112,10 +117,19 @@ contentOptions: {
 }
 ```
 
-
 ### Navigator Props
 
-The navigator component created by `DrawerNavigator(...)` takes the following props,
+The navigator component created by `DrawerNavigator(...)` takes the following props:
 
-- `screenProps` - Props to pass to each child screen
+- `screenProps` - Pass down extra options to child screens, for example:
 
+
+ ```jsx
+ const DrawerNav = DrawerNavigator({
+   // config
+ });
+ 
+ <DrawerNav
+   screenProps={/* these will get passed to the screen components */}
+ />
+ ```
diff --git a/docs/api/navigators/StackNavigator.md b/docs/api/navigators/StackNavigator.md
index 047b0cf..0b463cc 100644
--- a/docs/api/navigators/StackNavigator.md
+++ b/docs/api/navigators/StackNavigator.md
@@ -50,13 +50,13 @@ StackNavigator({
 
     // `ProfileScreen` is a React component that will be the main content of the screen.
     screen: ProfileScreen,
-    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a navigation prop.
+    // When `ProfileScreen` is loaded by the StackNavigator, it will be given a `navigation` prop.
 
     // Optional: When deep linking or using react-navigation in a web app, this path is used:
     path: 'people/:username',
     // The action and route params are extracted from the path.
 
-    // Optional: Override the navigation options for the screen
+    // Optional: Override the `navigationOptions` for the screen
     navigationOptions: {
       title: ({state}) => `${state.params.username}'s Profile'`,
     },
@@ -122,13 +122,23 @@ All `navigationOptions` for the `StackNavigator`:
   - `style` - Style object for the navigation bar
   - `tintColor` - Tint color for the header
 
+### Navigator Props
+
+The navigator component created by `StackNavigator(...)` takes the following props:
+
+- `screenProps` - Pass down extra options to child screens, for example:
+
+
+ ```jsx
+ const SomeStack = StackNavigator({
+   // config
+ });
+ 
+ <SomeStack
+   screenProps={/* these will get passed to the screen components */}
+ />
+ ```
+ 
 ### Examples
 
 See the examples [SimpleStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/SimpleStack.js) and [ModalStack.js](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground/js/ModalStack.js) which you can run locally as part of the [NavigationPlayground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground) app.
-
-
-### Navigator Props
-
-The navigator component created by `StackNavigator(...)` takes the following props,
-
-- `screenProps` - Props to pass to each child screen
diff --git a/docs/api/navigators/TabNavigator.md b/docs/api/navigators/TabNavigator.md
index 7f43de3..21f0df4 100644
--- a/docs/api/navigators/TabNavigator.md
+++ b/docs/api/navigators/TabNavigator.md
@@ -71,7 +71,17 @@ const MyApp = TabNavigator({
 });
 ```
 
-### Tab Navigator Options
+## API Definition
+
+```js
+TabNavigator(RouteConfigs, TabNavigatorConfig)
+```
+
+### RouteConfigs
+
+The route configs object is a mapping from route name to a route config, which tells the navigator what to present for that route, see [example](https://github.com/coodoo/react-navigation/blob/master/docs/api/navigators/StackNavigator.md#routeconfigs) from `StackNavigator`.
+
+### TabNavigatorConfig
 
 - `tabBarComponent` - component to use as the tab bar, e.g. `TabView.TabBarBottom`
 (this is the default on iOS), `TabView.TabBarTop`
@@ -138,6 +148,18 @@ tabBarOptions: {
 
 ### Navigator Props
 
-The navigator component created by `TabNavigator(...)` takes the following props,
+The navigator component created by `TabNavigator(...)` takes the following props:
 
-- `screenProps` - Props to pass to each child screen
+- `screenProps` - Pass down extra options to child screens, for example:
+
+
+ ```jsx
+ const TabNav = TabNavigator({
+   // config
+ });
+ 
+ <TabNav
+   screenProps={/* these will get passed to the screen components */}
+ />
+ ```
+