added basic router

Author: alexeuler

mobile/ReactNativeTutorial/app/App.js

@@ -2,15 +2,11 @@
 import React from 'react';
 import { Provider } from 'react-redux';
 import store from './setup/store';
-import Comments from './bundles/comments/Comments';
+import Router from './setup/Router';
 
-type PropsType = {
-
-}
-
-const App = (props: PropsType) => (
+const App = () => (
   <Provider store={store}>
-    <Comments />
+    <Router />
   </Provider>
 );
 

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/Footer/Footer.js

@@ -0,0 +1,16 @@
+// @flow
+import React from 'react';
+import { View, Text } from 'react-native';
+
+import styles from './FooterStyle';
+
+type PropsType = {
+
+}
+
+const Footer = (props: PropsType) => (
+  <View style={styles.container}>
+  </View>
+);
+
+export default Footer;

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/Footer/FooterStyle.js

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    height: 50,
+    backgroundColor: '#EFEFF2'
+  },
+});
+
+export default styles;

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/Index.js

@@ -0,0 +1,20 @@
+// @flow
+import React from 'react';
+import { View } from 'react-native';
+import List from './List/List';
+import Footer from './Footer/Footer';
+
+import styles from './IndexStyle';
+
+type PropsType = {
+
+}
+
+const Index = (props: PropsType) => (
+  <View style={styles.container}>
+    <List {...props} />
+    <Footer />
+  </View>
+);
+
+export default Index;

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/IndexStyle.js

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default styles;

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/List/List.js

@@ -0,0 +1,21 @@
+// @flow
+import React from 'react';
+import { ListView } from 'react-native';
+
+import styles from './ListStyle';
+
+type PropsType = {
+
+}
+
+const List = (props: PropsType) => (
+  <ListView
+    style={styles.container}
+    dataSource={new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 })}
+    renderRow={() => null}
+  >
+  </ListView>
+);
+
+export default List;
+

mobile/ReactNativeTutorial/app/bundles/comments/components/Index/List/ListStyle.js

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  container: {
+  },
+});
+
+export default styles;

mobile/ReactNativeTutorial/app/setup/Router.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Add from '../bundles/comments/components/Add/Add';
+import Index from '../bundles/comments/components/Index/Index';
+import { Scene, Router, Reducer } from 'react-native-router-flux'
+
+const reducerCreate = params => {
+  const defaultReducer = Reducer(params);
+  return (state, action)=>{
+    console.log(`Executing navigation action %c${action.type}`, 'color: #519C00');
+    return defaultReducer(state, action);
+  }
+};
+
+export default () => (
+  <Router createReducer={reducerCreate} sceneStyle={{backgroundColor:'#F7F7F7', paddingTop: 66}}>
+    <Scene key="root">
+      <Scene key="comments/index" component={Index} title="Comments"  initial={true} />
+      <Scene key="comments/add" component={Add} title="Add Comments" />
+    </Scene>
+  </Router>
+)

mobile/ReactNativeTutorial/package.json

@@ -12,6 +12,7 @@
     "react": "15.3.2",
     "react-native": "0.37.0",
     "react-native-elements": "^0.6.3",
+    "react-native-router-flux": "^3.37.0",
     "react-native-vector-icons": "^2.1.0",
     "react-redux": "^4.4.6",
     "redux": "^3.6.0",