From ea5b3353518f6f5fdd08123476c1eff807ee817d Mon Sep 17 00:00:00 2001
From: Marco Lovato <maglovato@gmail.com>
Date: Fri, 9 Sep 2016 04:34:10 -0700
Subject: [PATCH] Fixed and enhanced the Navigators example

Summary:
It took me a few timeslots of my life to figure out how to make this work. First, I tried to break into 2 files. The app export made no sense to me. But after doing that, I discover a invalid token, the return() was not supposed to be there. So I fixed the sample.
Closes https://github.com/facebook/react-native/pull/9802

Differential Revision: D3841320

Pulled By: mkonicek

fbshipit-source-id: 999227ee1c234b92d34844c2370ef654116b6a1d
---
 docs/UsingNavigators.md | 65 +++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/docs/UsingNavigators.md b/docs/UsingNavigators.md
index 19513116ae..763d8a4865 100644
--- a/docs/UsingNavigators.md
+++ b/docs/UsingNavigators.md
@@ -100,46 +100,55 @@ navigator.push({
 navigator.pop();
 ```
 
-A more complete example that demonstrates the pushing and popping of routes could therefore look something like this:
+A more complete example that demonstrates the pushing and popping of routes. Edit your index*.js file to look something like this:
 
 ```javascript
-import React, { Component, PropTypes } from 'react';
-import { Navigator, Text, TouchableHighlight, View } from 'react-native';
+import React, { Component } from 'react';
+import { AppRegistry, Navigator, Text, View } from 'react-native';
 
-export default class SimpleNavigationApp extends Component {
+import MyScene from './MyScene';
+
+class SimpleNavigationApp extends Component {
   render() {
     return (
       <Navigator
         initialRoute={{ title: 'My Initial Scene', index: 0 }}
-        renderScene={(route, navigator) => {
-          return (
-            <MyScene
-              title={route.title}
-  
-              // Function to call when a new scene should be displayed           
-              onForward={ () => {    
-                const nextIndex = route.index + 1;
-                navigator.push({
-                  title: 'Scene ' + nextIndex,
-                  index: nextIndex,
-                });
-              }}
-  
-              // Function to call to go back to the previous scene
-              onBack={() => {
-                if (route.index > 0) {
-                  navigator.pop();
-                }
-              }}
-            />
-          )
-        }}
+        renderScene={(route, navigator) =>
+          <MyScene
+            title={route.title}
+
+            // Function to call when a new scene should be displayed           
+            onForward={ () => {    
+              const nextIndex = route.index + 1;
+              navigator.push({
+                title: 'Scene ' + nextIndex,
+                index: nextIndex,
+              });
+            }}
+
+            // Function to call to go back to the previous scene
+            onBack={() => {
+              if (route.index > 0) {
+                navigator.pop();
+              }
+            }}
+          />
+        }
       />
     )
   }
 }
 
-class MyScene extends Component {
+AppRegistry.registerComponent('SimpleNavigationApp', () => SimpleNavigationApp);
+```
+
+And your MyScene.js to match this:
+
+```javascript
+import React, { Component, PropTypes } from 'react';
+import { View, Text, TouchableHighlight } from 'react-native';
+
+export default class MyScene extends Component {
   static propTypes = {
     title: PropTypes.string.isRequired,
     onForward: PropTypes.func.isRequired,