diff --git a/packages/react-navigation/docs/guides/Guide-Nested.md b/packages/react-navigation/docs/guides/Guide-Nested.md index a409b4b3..118b16c9 100644 --- a/packages/react-navigation/docs/guides/Guide-Nested.md +++ b/packages/react-navigation/docs/guides/Guide-Nested.md @@ -72,3 +72,43 @@ Now we have put one navigator inside another, and we can `navigate` between navi ```phone-example nested ``` + +## Nesting a Navigator in a Component +Sometimes it is desirable to nest a navigator that is wrapped in a component. This is useful in cases where the navigator only takes up part of the screen. For the child navigator to be wired into the navigation tree, it needs the `navigation` property from the parent navigator. + +```js +const SimpleApp = StackNavigator({ + Home: { screen: NavigatorWrappingScreen }, + Chat: { screen: ChatScreen }, +}); +``` +In this case, the NavigatorWrappingScreen is not a navigator, but it renders a navigator as part of its output. + +```js +class NavigatorWrappingScreen extends React.Component { + render() { + return ( + + + + + ); + } +} +``` + +To wire `MainScreenNavigator` into the navigation tree, we assign its `router` to the wrapping component. This makes `NavigatorWrappingScreen` "navigation aware", which tells the parent navigator to pass the navigation object down. Since the `NavigatorWrappingScreen`'s `router` is overridden with the child navigator's `router`, the child navigator will receive the needed `navigation`. + +```js +class NavigatorWrappingScreen extends React.Component { + render() { + return ( + + + + + ); + } +} +NavigatorWrappingScreen.router = MainScreenNavigator.router; +```