App included redux so that can change theme easily; Build app layout …

…and routers.

.babelrc

@@ -0,0 +1,26 @@
+{
+  "retainLines": true,
+  "compact": true,
+  "comments": false,
+  "whitelist": [
+    "es6.arrowFunctions",
+    "es6.blockScoping",
+    "es6.classes",
+    "es6.destructuring",
+    "es6.parameters",
+    "es6.properties.computed",
+    "es6.properties.shorthand",
+    "es6.spread",
+    "es6.modules",
+    "es6.templateLiterals",
+    "es7.trailingFunctionCommas",
+    "es7.objectRestSpread",
+    "es7.asyncFunctions",
+    "es7.classProperties",
+    "regenerator",
+    "flow",
+    "react",
+    "react.displayName"
+  ],
+  "sourceMaps": false
+}

components/ButtonExample.js

@@ -0,0 +1,68 @@
+import React, {
+    Component,
+    StyleSheet,
+    PropTypes,
+    View,
+    ScrollView,
+    Text
+} from 'react-native';
+import { Button, TYPO, COLOR  } from 'react-native-material-design-components';
+import { typography,color } from 'react-native-material-design-styles'
+
+
+var typographyStyle = StyleSheet.create(TYPO);
+
+export default class ButtonExample extends Component {
+    constructor(props) {
+        super(props);
+        // Operations usually carried out in componentWillMount go here
+    }
+
+    static defaultProps = {};
+    static propTypes = {};
+    state = {};
+
+    render = () => {
+        var { primary } =  this.props;
+        var primaryColor = COLOR[`${primary}500`];
+        return (
+            <ScrollView>
+                <View style={styles.content}>
+                    <Text style={[typographyStyle.paperFontHeadline, primaryColor]}>Button</Text>
+                </View>
+
+                <View style={styles.content}>
+                    <Text style={typographyStyle.paperFontSubhead}>Light Theme</Text>
+                </View>
+                <View style={{
+                        padding: 16,
+                        flex:1
+                    }}>
+                    <Button value="NORMAL FLAT" primary={primary}/>
+                    <Button value="DISABLED FLAT" disabled={true} primary={primary}/>
+                    <Button value="NORMAL RAISED" raised={true} primary={primary}/>
+                    <Button value="DISABLED RAISED" disabled={true} raised={true} primary={primary}/>
+                </View>
+                <View style={styles.content}>
+                    <Text style={typographyStyle.paperFontSubhead}>Dark Theme</Text>
+                </View>
+                <View style={{
+                        backgroundColor: COLOR.paperGrey900.color,
+                        padding: 16,
+                        flex:1
+                    }}>
+                    <Button value="NORMAL FLAT" theme="dark" primary={primary}/>
+                    <Button value="DISABLED FLAT" disabled={true} theme="dark" primary={primary}/>
+                    <Button value="NORMAL RAISED" theme="dark" raised={true} primary={primary}/>
+                    <Button value="DISABLED RAISED" disabled={true} theme="dark" raised={true} primary={primary}/>
+                </View>
+            </ScrollView>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    content: {
+        padding: 16,
+    },
+});

configureStore.js

@@ -0,0 +1,17 @@
+import { createStore, applyMiddleware } from 'redux';
+import thunkMiddleware from 'redux-thunk';
+import createLogger from 'redux-logger';
+//import callAPIMiddleware from './redux/middlewares/callAPIMiddleware';
+import rootReducer from './redux/modules/rootReducer';
+
+const loggerMiddleware = createLogger();
+
+const createStoreWithMiddleware = applyMiddleware(
+    thunkMiddleware,
+    loggerMiddleware
+    //callAPIMiddleware
+)(createStore);
+
+export default function configureStore(initialState) {
+    return createStoreWithMiddleware(rootReducer, initialState);
+}

index.android.js

@@ -1,52 +1,24 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- */
-'use strict';
+import React, {
+    Component,
+    AppRegistry,
+    StyleSheet,
+    View
+} from 'react-native';
+import { Provider } from 'react-redux';
+import configureStore from './configureStore.js';
+import getRoute from './routers.js';
 
-var React = require('react-native');
-var {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View,
-} = React;
+const store = configureStore();
 
-var MaterialReactNative = React.createClass({
-  render: function() {
-    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}>
-          Shake or press menu button for dev menu
-        </Text>
-      </View>
-    );
-  }
-});
-
-var 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,
-  },
-});
+export default class MaterialReactNative extends Component {
+    render = () => {
+        let component = getRoute(store);
+        return (
+            <Provider store={store}>
+                {component}
+            </Provider>
+        )
+    }
+}
 
 AppRegistry.registerComponent('MaterialReactNative', () => MaterialReactNative);

package.json

@@ -6,6 +6,12 @@
     "start": "react-native start"
   },
   "dependencies": {
-    "react-native": "^0.14.2"
+    "react": "^0.14.2",
+    "react-native": "^0.13.2",
+    "react-native-material-design-styles": "^0.2.4",
+    "react-redux": "^4.0.0",
+    "redux": "^3.0.4",
+    "redux-logger": "^2.0.4",
+    "redux-thunk": "^1.0.0"
   }
 }

redux/containers/Main.js

@@ -0,0 +1,30 @@
+import React, { Component } from 'react-native';
+import { connect } from 'react-redux';
+import { CHANGE_PRIMARY, changePrimary } from '../modules/main';
+import ButtonExample from '../../components/ButtonExample';
+
+
+class Main extends Component {
+    componentDidMount() {
+        const { dispatch, navigator } = this.props;
+        dispatch(changePrimary('paperTeal'));
+    }
+
+    render() {
+        const { main, dispatch, navigator } = this.props;
+        return (
+            <ButtonExample primary={main.primary}/>
+        )
+    }
+
+    handleCLick(dispatch, navigator) {
+        navigator.push({name: 'analysis'});
+        dispatch(finishSplash())
+    }
+}
+
+function mapStateToProps(state) {
+    return { main } = state;
+}
+
+export default connect(mapStateToProps)(Main);

redux/modules/createReducer.js

@@ -0,0 +1,8 @@
+export default (initialState, handlers) =>
+    (state = initialState, action) => {
+        if (handlers.hasOwnProperty(action.type)) {
+            return handlers[action.type](state, action);
+        } else {
+            return state;
+        }
+    };

redux/modules/main.js

@@ -0,0 +1,18 @@
+import createReducer from './createReducer.js'
+
+export const CHANGE_PRIMARY = 'CHANGE_PRIMARY';
+
+export const main = createReducer({primary: 'paperOrange'}, {
+    [CHANGE_PRIMARY](state, action) {
+        return Object.assign({}, {
+            primary: action.primary
+        });
+    }
+});
+
+export function changePrimary(primary) {
+    return {
+        type: CHANGE_PRIMARY,
+        primary
+    }
+}

redux/modules/rootReducer.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux';
+import { main } from './main';
+
+export default combineReducers({
+    main
+});

routers.js

@@ -0,0 +1,50 @@
+import React, {
+    Navigator,
+    View,
+    Text,
+    StyleSheet,
+    DrawerLayoutAndroid
+} from 'react-native';
+import Main from './redux/containers/Main';
+
+export default store => {
+    let initialRoute = {name: 'main'};
+    var navigationView = (
+        <View style={{flex: 1, backgroundColor: '#fff'}}>
+            <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>I'm in the Drawer!</Text>
+        </View>
+    );
+    return (
+        <DrawerLayoutAndroid
+            drawerWidth={300}
+            drawerPosition={DrawerLayoutAndroid.positions.Left}
+            renderNavigationView={() => navigationView}>
+            <Navigator
+                initialRoute={initialRoute}
+                configureScene={() => Navigator.SceneConfigs.FadeAndroid}
+                renderScene={RouteMapper}
+            />
+        </DrawerLayoutAndroid>
+    );
+
+    function RouteMapper(route, navigator) {
+        switch (route.name) {
+            case 'splash':
+                return (
+                    <SplashContainer dispatch={store.dispatch} navigator={navigator}/>
+                );
+            case 'main':
+                return (
+                    <Main dispatch={store.dispatch} navigator={navigator}/>
+                );
+            case 'analysis':
+                return (
+                    <AnalysisContainer dispatch={store.dispatch} navigator={navigator}/>
+                );
+            case 'test':
+                return (
+                    <MaterialDesign />
+                );
+        }
+    }
+}