diff --git a/docs/guides/Guide-Basic-Example.md b/docs/guides/Guide-Basic-Example.md
new file mode 100644
index 0000000..a6721e0
--- /dev/null
+++ b/docs/guides/Guide-Basic-Example.md
@@ -0,0 +1,235 @@
+# Hello Mobile Navigation
+
+Let's use React Navigation to build a simple chat-like application for Android and iOS.
+
+## Setup and Installation
+
+First, make sure you're [all set up to use React Native](http://facebook.github.io/react-native/docs/getting-started.html). Next, create a new project and add `react-navigation`:
+
+```sh
+# Create a new React Native App
+react-native init SimpleApp
+cd SimpleApp
+
+# Install the latest version of react-navigation from npm
+npm install --save react-navigation
+
+# Run the new app
+react-native run-android
+# or:
+react-native run-ios
+```
+
+If you are using `create-react-native-app` instead of `react-native init`, then:
+
+```sh
+# Create a new React Native App
+create-react-native-app SimpleApp
+cd SimpleApp
+
+# Install the latest version of react-navigation from npm
+npm install --save react-navigation
+
+# Run the new app
+npm start
+
+# This will start a development server for you and print a QR code in your terminal.
+```
+
+Verify that you can successfully see the bare sample app run on iOS and/or Android:
+
+```phone-example
+bare-project
+```
+
+We want to share code on iOS and Android, so let's delete the contents of `index.js` (or `index.ios.js` and `index.android.js` if using a React Native version before 0.49) and replace it with `import './App';` - after which, we need to create the new file for our app implementation, `App.js` (if you used `create-react-native-app` this has been already done)
+
+## Introducing Stack Navigator
+
+For our app, we want to use the `StackNavigator` because conceptually we want to obtain a 'card stack' effect of movement, where each new screen is put on the top of the stack and going back removes a screen from the top of the stack. Let's start with just one screen:
+
+```js
+import React from 'react';
+import {
+ AppRegistry,
+ Text,
+} from 'react-native';
+import { StackNavigator } from 'react-navigation';
+
+class HomeScreen extends React.Component {
+ static navigationOptions = {
+ title: 'Welcome',
+ };
+ render() {
+ return Hello, Navigation!;
+ }
+}
+
+export const SimpleApp = StackNavigator({
+ Home: { screen: HomeScreen },
+});
+
+AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
+```
+
+If you used `create-react-native-app` the already existing `App.js` will be modified to
+
+```js
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { StackNavigator } from 'react-navigation';
+
+class HomeScreen extends React.Component {
+ static navigationOptions = {
+ title: 'Welcome'
+ };
+ render() {
+ return Hello, Navigation!;
+ }
+}
+
+const SimpleApp = StackNavigator({
+ Home: { screen: HomeScreen }
+});
+
+export default class App extends React.Component {
+ render() {
+ return ;
+ }
+}
+
+const styles = StyleSheet.create({
+ container: {
+ flex: 1,
+ backgroundColor: '#fff',
+ alignItems: 'center',
+ justifyContent: 'center'
+ }
+});
+
+```
+
+The `title` of the screen is configurable on the [static `navigationOptions`](/docs/navigators/navigation-options), where many options can be set to configure the presentation of the screen in the navigator.
+
+Now the same screen should appear on both iPhone and Android apps:
+
+```phone-example
+first-screen
+```
+
+## Adding a New Screen
+
+In our `App.js` file, let's add a new screen called `ChatScreen`, defining it under `HomeScreen`:
+
+```js
+// ...
+
+class HomeScreen extends React.Component {
+ //...
+}
+
+class ChatScreen extends React.Component {
+ static navigationOptions = {
+ title: 'Chat with Lucy',
+ };
+ render() {
+ return (
+
+ Chat with Lucy
+
+ );
+ }
+}
+
+```
+
+We can then add a button to our `HomeScreen` component that links to `ChatScreen`: we need to use the provided method `navigate` (from the [screen navigation prop](/docs/navigators/navigation-prop)) by giving it the `routeName` of the screen we want to reach, in this case `Chat`.
+
+```js
+class HomeScreen extends React.Component {
+ static navigationOptions = {
+ title: 'Welcome',
+ };
+ render() {
+ const { navigate } = this.props.navigation;
+ return (
+
+ Hello, Chat App!
+
+ );
+ }
+}
+```
+
+(*don't forget to import View and Button from react-native:* `import { AppRegistry, Text, View, Button } from 'react-native';`)
+
+But that won't work until we say to our `StackNavigator` of the existence of the `Chat` screen, like so:
+
+```js
+export const SimpleApp = StackNavigator({
+ Home: { screen: HomeScreen },
+ Chat: { screen: ChatScreen },
+});
+```
+
+Now you can navigate to your new screen, and go back:
+
+```phone-example
+first-navigation
+```
+
+## Passing params
+
+Hardcoding a name into the `ChatScreen` isn't ideal. It'd be more useful if we could pass a name to be rendered instead, so let's do that.
+
+In addition to specifying the target `routeName` in the navigate function, we can pass params that will be put into the new route. First, we'll edit our `HomeScreen` component to pass a `user` param into the route.
+
+```js
+class HomeScreen extends React.Component {
+ static navigationOptions = {
+ title: 'Welcome',
+ };
+ render() {
+ const { navigate } = this.props.navigation;
+ return (
+
+ Hello, Chat App!
+
+ );
+ }
+}
+```
+
+We can then edit our `ChatScreen` component to display the `user` param that was passed in through the route:
+
+```js
+class ChatScreen extends React.Component {
+ // Nav options can be defined as a function of the screen's props:
+ static navigationOptions = ({ navigation }) => ({
+ title: `Chat with ${navigation.state.params.user}`,
+ });
+ render() {
+ // The screen's current route is passed in to `props.navigation.state`:
+ const { params } = this.props.navigation.state;
+ return (
+
+ Chat with {params.user}
+
+ );
+ }
+}
+```
+
+Now you can see the name when you navigate to the Chat screen. Try changing the `user` param in `HomeScreen` and see what happens!
+
+```phone-example
+first-navigation
+```
diff --git a/docs/guides/Guide-Intro.md b/docs/guides/Guide-Intro.md
index 3afa19a..c509006 100644
--- a/docs/guides/Guide-Intro.md
+++ b/docs/guides/Guide-Intro.md
@@ -1,235 +1,23 @@
-# Hello Mobile Navigation
+# Introduction
-Let's use React Navigation to build a simple chat application for Android and iOS.
+_Learn once, navigate anywhere._
-## Setup and Installation
+React Navigation is born from the React Native community's need for an extensible yet easy-to-use navigation solution based on Javascript.
-First, make sure you're [all set up to use React Native](http://facebook.github.io/react-native/docs/getting-started.html). Next, create a new project and add `react-navigation`:
+React Navigation is the result of a collaboration between developers from Facebook, Expo and the React community at large: it replaces and improves upon several navigation libraries in the ecosystem, including Ex-Navigation, React Native's Navigator and NavigationExperimental components.
-```sh
-# Create a new React Native App
-react-native init SimpleApp
-cd SimpleApp
+## Getting Started
-# Install the latest version of react-navigation from npm
-npm install --save react-navigation
+If you're already familiar with React Native then you'll be able to get moving with React Navigation in minimal time.
-# Run the new app
-react-native run-android
-# or:
-react-native run-ios
-```
+1. [Quick Start](/docs/intro/quick-start)
+Quickly get a grasp on the React Navigation API with demonstrations of the StackNavigator, TabNavigator, and DrawerNavigator.
-If you are using `create-react-native-app` instead of `react-native init`, then:
+2. [Simple App](/docs/intro/basic-app)
+Dive into the basics of React Navigation by creating a new React Native project, installing React Navigation, creating your first navigator, and learning how to interact with it.
-```sh
-# Create a new React Native App
-create-react-native-app SimpleApp
-cd SimpleApp
+3. [Navigation Playground](https://github.com/react-community/react-navigation/tree/master/examples/NavigationPlayground)
+Curious of the various capabilities of React Navigation? Browse the official example app, which will demonstrates various patterns with React Navigation.
-# Install the latest version of react-navigation from npm
-npm install --save react-navigation
-
-# Run the new app
-npm start
-
-# This will start a development server for you and print a QR code in your terminal.
-```
-
-Verify that you can successfully see the bare sample app run on iOS and/or Android:
-
-```phone-example
-bare-project
-```
-
-We want to share code on iOS and Android, so let's delete the contents of `index.ios.js` and `index.android.js` and replace it with `import './App';` - after which, we need to create the new file for our app implementation, `App.js` (if you used `create-react-native-app` this has been already done)
-
-## Introducing Stack Navigator
-
-For our app, we want to use the `StackNavigator` because conceptually we want to obtain a 'card stack' effect of movement, where each new screen is put on the top of the stack and going back removes a screen from the top of the stack. Let's start with just one screen:
-
-```js
-import React from 'react';
-import {
- AppRegistry,
- Text,
-} from 'react-native';
-import { StackNavigator } from 'react-navigation';
-
-class HomeScreen extends React.Component {
- static navigationOptions = {
- title: 'Welcome',
- };
- render() {
- return Hello, Navigation!;
- }
-}
-
-export const SimpleApp = StackNavigator({
- Home: { screen: HomeScreen },
-});
-
-AppRegistry.registerComponent('SimpleApp', () => SimpleApp);
-```
-
-If you used `create-react-native-app` the already existing `App.js` will be modified to
-
-```js
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { StackNavigator } from 'react-navigation';
-
-class HomeScreen extends React.Component {
- static navigationOptions = {
- title: 'Welcome'
- };
- render() {
- return Hello, Navigation!;
- }
-}
-
-const SimpleApp = StackNavigator({
- Home: { screen: HomeScreen }
-});
-
-export default class App extends React.Component {
- render() {
- return ;
- }
-}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- backgroundColor: '#fff',
- alignItems: 'center',
- justifyContent: 'center'
- }
-});
-
-```
-
-The `title` of the screen is configurable on the [static `navigationOptions`](/docs/navigators/navigation-options), where many options can be set to configure the presentation of the screen in the navigator.
-
-Now the same screen should appear on both iPhone and Android apps:
-
-```phone-example
-first-screen
-```
-
-## Adding a New Screen
-
-In our `App.js` file, let's add a new screen called `ChatScreen`, defining it under `HomeScreen`:
-
-```js
-// ...
-
-class HomeScreen extends React.Component {
- //...
-}
-
-class ChatScreen extends React.Component {
- static navigationOptions = {
- title: 'Chat with Lucy',
- };
- render() {
- return (
-
- Chat with Lucy
-
- );
- }
-}
-
-```
-
-We can then add a button to our `HomeScreen` component that links to `ChatScreen`: we need to use the provided method `navigate` (from the [screen navigation prop](/docs/navigators/navigation-prop)) by giving it the `routeName` of the screen we want to reach, in this case `Chat`.
-
-```js
-class HomeScreen extends React.Component {
- static navigationOptions = {
- title: 'Welcome',
- };
- render() {
- const { navigate } = this.props.navigation;
- return (
-
- Hello, Chat App!
-
- );
- }
-}
-```
-
-(*don't forget to import View and Button from react-native: * `import { AppRegistry, Text, View, Button } from 'react-native';`)
-
-But that won't work until we say to our `StackNavigator` of the existence of the `Chat` screen, like so:
-
-```js
-export const SimpleApp = StackNavigator({
- Home: { screen: HomeScreen },
- Chat: { screen: ChatScreen },
-});
-```
-
-Now you can navigate to your new screen, and go back:
-
-```phone-example
-first-navigation
-```
-
-## Passing params
-
-Hardcoding a name into the `ChatScreen` isn't ideal. It'd be more useful if we could pass a name to be rendered instead, so let's do that.
-
-In addition to specifying the target `routeName` in the navigate function, we can pass params that will be put into the new route. First, we'll edit our `HomeScreen` component to pass a `user` param into the route.
-
-```js
-class HomeScreen extends React.Component {
- static navigationOptions = {
- title: 'Welcome',
- };
- render() {
- const { navigate } = this.props.navigation;
- return (
-
- Hello, Chat App!
-
- );
- }
-}
-```
-
-We can then edit our `ChatScreen` component to display the `user` param that was passed in through the route:
-
-```js
-class ChatScreen extends React.Component {
- // Nav options can be defined as a function of the screen's props:
- static navigationOptions = ({ navigation }) => ({
- title: `Chat with ${navigation.state.params.user}`,
- });
- render() {
- // The screen's current route is passed in to `props.navigation.state`:
- const { params } = this.props.navigation.state;
- return (
-
- Chat with {params.user}
-
- );
- }
-}
-```
-
-Now you can see the name when you navigate to the Chat screen. Try changing the `user` param in `HomeScreen` and see what happens!
-
-```phone-example
-first-navigation
-```
+4. [Community Contributions](https://github.com/react-community/react-navigation#community-contributions)
+With the flexibility of React Navigation we won't be able to cover every possible situation, but another developer may have! Browse our list of community contributions to find topics that may answer your questions.
diff --git a/docs/guides/Guide-Quick-Start.md b/docs/guides/Guide-Quick-Start.md
new file mode 100644
index 0000000..ef5b249
--- /dev/null
+++ b/docs/guides/Guide-Quick-Start.md
@@ -0,0 +1,316 @@
+# Quick Start Guide
+
+To get started with React Navigation, all you have to do is install the `react-navigation` npm package.
+
+### Install with NPM
+
+```
+npm install --save react-navigation
+```
+
+### Install with Yarn
+
+```
+yarn add react-navigation
+```
+
+To start using React Navigation you'll have to create a navigator. React Navigation comes with three default navigators.
+
+- `StackNavigator` - Provides a way for your app to transition between screens where each new screen is placed on top of a stack.
+- `TabNavigator` - Used to set up a screen with several tabs.
+- `DrawerNavigator` - Used to set up a screen with drawer navigation.
+
+## Creating a StackNavigator
+
+StackNavigator's are the most common form of navigator so we'll use it as a basic demonstration. To get started, create a `StackNavigator`.
+
+```javascript
+import { StackNavigator } from 'react-navigation';
+
+const RootNavigator = StackNavigator({
+
+});
+
+export default RootNavigator;
+```
+
+We can then add screens to this `StackNavigator`. Each key represents a screen.
+
+```javascript
+import React from 'react';
+import { View, Text } from 'react-native';
+import { StackNavigator } from 'react-navigation';
+
+const HomeScreen = () => (
+
+ Home Screen
+
+);
+
+const DetailsScreen = () => (
+
+ Details Screen
+
+);
+
+const RootNavigator = StackNavigator({
+ Home: {
+ screen: HomeScreen,
+ },
+ Details: {
+ screen: DetailsScreen,
+ },
+});
+
+export default RootNavigator;
+```
+
+Now let's add a title to the navigation bar.
+
+```javascript
+...
+
+const RootNavigator = StackNavigator({
+ Home: {
+ screen: HomeScreen,
+ navigationOptions: {
+ headerTitle: 'Home',
+ },
+ },
+ Details: {
+ screen: DetailsScreen,
+ navigationOptions: {
+ headerTitle: 'Details',
+ },
+ },
+});
+
+export default RootNavigator;
+```
+
+Finally, we should be able to navigate from the home screen to the details screen. When you register a component with a navigator that component will then have a `navigation` prop added to it. This `navigation` prop drives how we use move between different screens.
+
+To move from the home screen to the details screen we'll want to use `navigation.navigate`, like so:
+
+```javascript
+...
+import { View, Text, Button } from 'react-native';
+
+const HomeScreen = ({ navigation }) => (
+
+ Home Screen
+
+);
+
+...
+```
+
+And there you have it! That's the basics of using the [StackNavigator](/docs/navigators/stack), and React Navigation as a whole. Here's the full code from this example:
+
+
+
+## Creating a TabNavigator
+
+To get started with `TabNavigator` first import and create a new `RootTabs` component.
+
+```javascript
+import { TabNavigator } from 'react-navigation';
+
+const RootTabs = TabNavigator({
+
+});
+
+export default RootTabs;
+```
+
+We then need to create some screens and add them to our `TabNavigator`.
+
+```javascript
+import React from 'react';
+import { View, Text } from 'react-native';
+import { TabNavigator } from 'react-navigation';
+
+const HomeScreen = () => (
+
+ Home Screen
+
+);
+
+const ProfileScreen = () => (
+
+ Profile Screen
+
+);
+
+const RootTabs = TabNavigator({
+ Home: {
+ screen: HomeScreen,
+ },
+ Profile: {
+ screen: ProfileScreen,
+ },
+});
+
+export default RootTabs;
+```
+
+Getting there! Now let's explicity set a label and icon for the tab bar.
+
+> We'll be using [`react-native-vector-icons`](https://github.com/oblador/react-native-vector-icons) in the example. If you don't have it installed in your project already please do so.
+
+```javascript
+...
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+...
+
+const RootTabs = TabNavigator({
+ Home: {
+ screen: HomeScreen,
+ navigationOptions: {
+ tabBarLabel: 'Home',
+ tabBarIcon: ({ tintColor, focused }) => (
+
+ ),
+ },
+ },
+ Profile: {
+ screen: ProfileScreen,
+ navigationOptions: {
+ tabBarLabel: 'Profile',
+ tabBarIcon: ({ tintColor, focused }) => (
+
+ ),
+ },
+ },
+});
+
+export default RootTabs;
+```
+
+This will ensure the `tabBarLabel` is consistent (important when using nested navigators) and it will set a `tabBarIcon`. This icon will only be visible on iOS by default given the tab bar component used, which aligns with standard design patterns on Android.
+
+You can view the complete finished code below:
+
+
+
+## Creating a DrawerNavigator
+
+To get started with `DrawerNavigator` first import and create a new `RootDrawer` component.
+
+```javascript
+import { DrawerNavigator } from 'react-navigation';
+
+const RootDrawer = DrawerNavigator({
+
+});
+
+export default RootDrawer;
+```
+
+We then need to create some screens and add them to our `DrawerNavigator`.
+
+```javascript
+import React from 'react';
+import { View, Text } from 'react-native';
+import { DrawerNavigator } from 'react-navigation';
+
+const HomeScreen = () => (
+
+ Home Screen
+
+);
+
+const ProfileScreen = () => (
+
+ Profile Screen
+
+);
+
+const RootDrawer = DrawerNavigator({
+ Home: {
+ screen: HomeScreen,
+ },
+ Profile: {
+ screen: ProfileScreen,
+ },
+});
+
+export default RootDrawer;
+```
+
+Getting there! Now let's explicity set a label and icon for the drawer items.
+
+> We'll be using `react-native-vector-icons` in the example. If you don't have it installed in your project already please do so.
+
+```javascript
+...
+import Ionicons from 'react-native-vector-icons/Ionicons';
+
+...
+
+const RootDrawer = DrawerNavigator({
+ Home: {
+ screen: HomeScreen,
+ navigationOptions: {
+ drawerLabel: 'Home',
+ drawerIcon: ({ tintColor, focused }) => (
+
+ ),
+ },
+ },
+ Profile: {
+ screen: ProfileScreen,
+ navigationOptions: {
+ drawerLabel: 'Profile',
+ drawerIcon: ({ tintColor, focused }) => (
+
+ ),
+ },
+ },
+});
+
+export default RootDrawer;
+```
+
+To open the drawer you can swipe from the left edge of the screen to the right. You've also got the option to open the drawer view `navigation.navigate('DrawerToggle')`, which we'll add to the Home component now. Make sure you import the `Button` component from `react-native`.
+
+```javascript
+...
+
+const HomeScreen = ({ navigation }) => (
+
+ Home Screen
+
+);
+
+...
+```
+
+You can view the finished code below.
+
+
diff --git a/website/public/index.html b/website/public/index.html
index 8e34142..80636c4 100644
--- a/website/public/index.html
+++ b/website/public/index.html
@@ -18,4 +18,6 @@
debug: false
});
+
+