diff --git a/packages/react-navigation/docs/guides/Guide-Intro.md b/packages/react-navigation/docs/guides/Guide-Intro.md
index 6cfdd824..de1ddbd4 100644
--- a/packages/react-navigation/docs/guides/Guide-Intro.md
+++ b/packages/react-navigation/docs/guides/Guide-Intro.md
@@ -6,7 +6,6 @@ Let's use React Navigation to build a simple chat application for Android and iO
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
@@ -16,11 +15,13 @@ cd SimpleApp
npm install --save react-navigation
# Run the new app
-react-native run-android # or:
+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
@@ -41,13 +42,11 @@ Verify that you can successfully see the bare sample app run on iOS and/or Andro
bare-project
```
-We want to share code on iOS and Android, so lets delete the contents of `index.ios.js` and `index.android.js` and replace it with `import './App';`.
-
-Now lets create the new file for our app implementation, `App.js`.
+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 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 we want a conceptual 'stack' navigation, 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:
+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';
@@ -66,14 +65,50 @@ class HomeScreen extends React.Component {
}
}
-export default const SimpleApp = StackNavigator({
+export const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
});
-// if you are using create-react-native-app you don't need this line
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:
@@ -84,9 +119,15 @@ first-screen
## Adding a New Screen
-In our `App.js` file, let's add a new screen called `ChatScreen`:
+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',
@@ -99,9 +140,10 @@ class ChatScreen extends React.Component {
);
}
}
+
```
-We can then add a button to our `HomeScreen` component that links to `ChatScreen` using the `routeName` `Chat`.
+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 {
@@ -123,10 +165,12 @@ class HomeScreen extends React.Component {
}
```
-We're using the navigate function from the [screen navigation prop](/docs/navigators/navigation-prop) to go to `ChatScreen`. But that won't work until we add this to our `StackNavigator` like so:
+(*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 default const SimpleApp = StackNavigator({
+export const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Chat: { screen: ChatScreen },
});