Stack Navigator with two Screens

Author: franzejr

index.android.js

@@ -1,53 +1,14 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
 import React, { Component } from 'react';
 import {
   AppRegistry,
-  StyleSheet,
-  Text,
-  View
 } from 'react-native';
+import App from './src/App'
 
-export default class reactNavigationSample extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.android.js
-        </Text>
-        <Text style={styles.instructions}>
-          Double tap R on your keyboard to reload,{'\n'}
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
-  }
+const reactNavigationSample = () => {
+  return (
+    <App />
+  );
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-});
 
 AppRegistry.registerComponent('reactNavigationSample', () => reactNavigationSample);

index.ios.js

@@ -1,53 +1,28 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
 import React, { Component } from 'react';
 import {
   AppRegistry,
-  StyleSheet,
-  Text,
-  View
 } from 'react-native';
+import App from './src/App'
+import { StackNavigator } from 'react-navigation';
+import SecondScreen from './src/SecondScreen'
+
+class reactNavigationSample extends Component {
+  static navigationOptions = {
+    title: 'Home Screen',
+  };
+
+  render(){
+    const { navigation } = this.props;
 
-export default class reactNavigationSample extends Component {
-  render() {
     return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.ios.js
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          Cmd+D or shake for dev menu
-        </Text>
-      </View>
+      <App navigation={ navigation }/>
     );
   }
 }
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
+const SimpleApp = StackNavigator({
+  Home: { screen: reactNavigationSample },
+  SecondScreen: { screen: SecondScreen, title: 'ss' },
 });
 
-AppRegistry.registerComponent('reactNavigationSample', () => reactNavigationSample);
+AppRegistry.registerComponent('reactNavigationSample', () => SimpleApp);

package.json

@@ -8,7 +8,8 @@
 	},
 	"dependencies": {
 		"react": "15.4.2",
-		"react-native": "0.40.0"
+		"react-native": "0.40.0",
+		"react-navigation": "^1.0.0-beta.1"
 	},
 	"devDependencies": {
 		"babel-jest": "18.0.0",
@@ -19,4 +20,4 @@
 	"jest": {
 		"preset": "react-native"
 	}
-}
+}

src/App.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text,
+  Button,
+  View
+} from 'react-native';
+import { StackNavigator } from 'react-navigation';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+  instructions: {
+    textAlign: 'center',
+    color: '#333333',
+    marginBottom: 5,
+  },
+});
+
+const App = (props)  => {
+  const { navigate } = props.navigation;
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.welcome}>
+        Welcome to React Native Navigation Sample!
+      </Text>
+      <Button
+          onPress={() => navigate('SecondScreen')}
+          title="Go to Second Screen"
+        />
+    </View>
+  );
+}
+
+export default App

src/SecondScreen.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5FCFF',
+  },
+  welcome: {
+    fontSize: 20,
+    textAlign: 'center',
+    margin: 10,
+  },
+});
+
+const SecondScreen = ()  => {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.welcome}>
+        THIS IS THE SECOND SCREEN!
+      </Text>
+    </View>
+  );
+}
+
+SecondScreen.navigationOptions = {
+  title: 'Second Screen Title',
+};
+
+export default SecondScreen