1) added react-navigation package and ran into issue and found workar…

…ound here - react-navigation/react-navigation#923
nazmulidris · Apr 12, 2017 · 24c79fe · 24c79fe
1 parent 2cd0e69
commit 24c79fe
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 12 deletions.
diff --git a/app/HomeScreen.js b/app/HomeScreen.js
@@ -6,22 +6,45 @@ import {AppRegistry, StatusBar, Text, View} from "react-native";
 
 import * as css from "./Styles";
 
-class WeatherApp extends Component {
+import {StackNavigator} from "react-navigation";
+
+// export class MainScreen extends Component {
+//   render() {
+//     const msg1 = `Weather App`;
+//     const msg2 = `More coming soon!`;
+//
+//     return (
+//       <View style={css.homescreen.v_container}>
+//         <StatusBar hidden={true} translucent={true} animated={true}
+//                    barStyle={'light-content'} backgroundColor={'#455a64'}/>
+//         <Text style={css.homescreen.heading}>{msg1}</Text>
+//         <Text style={css.homescreen.body}>{msg2}</Text>
+//       </View>
+//     );
+//   }
+// }
+//
+// AppRegistry.registerComponent('WeatherApp', () => MainScreen);
+
+class HomeScreen extends Component {
+  static navigationOptions = {
+    title: 'Weather App',
+  };
+
   render() {
-    const msg1 = `Weather App`;
-    const msg2 = `More coming soon!`;
+    const msg1 = `More coming soon!`;
 
     return (
       <View style={css.homescreen.v_container}>
-        <StatusBar hidden={true} translucent={true} animated={true}
-                   barStyle={'light-content'} backgroundColor={'#455a64'}/>
         <Text style={css.homescreen.heading}>{msg1}</Text>
-        <Text style={css.homescreen.body}>{msg2}</Text>
       </View>
     );
   }
 }
 
-AppRegistry.registerComponent('WeatherApp', () => WeatherApp);
+const SimpleApp = StackNavigator(
+  {
+    Home: {screen: HomeScreen},
+  });
 
-export {WeatherApp}
+AppRegistry.registerComponent('WeatherApp', () => SimpleApp);
diff --git a/app/Styles.js b/app/Styles.js
@@ -3,7 +3,7 @@
 import React from "react";
 import {StyleSheet} from "react-native";
 
-const homescreen = StyleSheet.create(
+export const homescreen = StyleSheet.create(
   {
     v_container: {
       flex: 1,
@@ -42,5 +42,3 @@ const homescreen = StyleSheet.create(
       resizeMode: 'contain', //'cover' | 'contain'
     },
   });
-
-export {homescreen}
diff --git a/package.json b/package.json
@@ -10,7 +10,7 @@
     "lodash": "^4.17.4",
     "react": "16.0.0-alpha.6",
     "react-native": "0.43.3",
-    "react-navigation": "^1.0.0-beta.7"
+    "react-navigation": "git+https://github.com/react-community/react-navigation.git"
   },
   "devDependencies": {
     "babel-jest": "19.0.0",