diff --git a/docs/MoreResources.md b/docs/MoreResources.md index 1b4286ed17a803..d37ff50783fad3 100644 --- a/docs/MoreResources.md +++ b/docs/MoreResources.md @@ -5,7 +5,7 @@ layout: docs category: The Basics permalink: docs/more-resources.html next: integration-with-existing-apps -previous: using-navigators +previous: networking --- If you just read through this website, you should be able to build a pretty cool React Native app. But React Native isn't just a product made by one company - it's a community of thousands of developers. So if you're interested in React Native, here's some related stuff you might want to check out. diff --git a/docs/Navigation.md b/docs/Navigation.md index 4f1326a4a96822..f93410be3775c6 100644 --- a/docs/Navigation.md +++ b/docs/Navigation.md @@ -8,15 +8,67 @@ next: performance previous: javascript-environment --- -This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use `Navigator`. If you are only targeting iOS and would like to stick to the native look and feel, check out `NavigatorIOS`. If you are looking for greater control over your navigation stack, you can't go wrong with `NavigationExperimental`. +This guide covers the various navigation components available in React Native. If you are just getting started with navigation, you will probably want to use React Navigation. + +If you are only targeting iOS and would like to stick to the native look and feel, check out `NavigatorIOS`. The `Navigator` component is older but has been thoroughly tested in production. + +## React Navigation + +The community solution to navigation is a standalone library that allows developers to set up the screens of an app with just a few lines of code. + +The first step is to install in your app: + +``` +npm install --save react-navigation +``` + +Then you can quickly create an app with a home screen and a profile screen: + +``` +import { + StackNavigator, +} from 'react-navigation'; + +const App = StackNavigator({ + Main: {screen: MainScreen}, + Profile: {screen: ProfileScreen}, +}); +``` + +Each screen component can set navigation options such as the header title. It can use action creators on the `navigation` prop to link to other screens: + +``` +class MainScreen extends React.Component { + static navigationOptions = { + title: 'Welcome', + }; + render() { + const { navigate } = this.props.navigation; + return ( +