feat: added SimpleNavigator & sample pages

.editorconfig

@@ -0,0 +1,15 @@
+# EditorConfig: http://EditorConfig.org
+
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc

@@ -0,0 +1,85 @@
+{
+  "plugins": [
+    "react", "jsdoc"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true,
+      "experimentalObjectRestSpread": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    // Common js rules
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": 2,
+    "curly": 2,
+    "eqeqeq": 2,
+    "no-extend-native": 2,
+    "no-proto": 2,
+    "no-caller": 2,
+    "no-unused-vars": [2, { "vars": "all", "args": "none" }],
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "new-cap": 2,
+    "quotes": [2, "single"],
+    "max-depth": [2, 3],
+    "max-statements": [2, 45],
+    "max-len": [2, 150],
+    "no-eq-null": 2,
+    "operator-linebreak": 2,
+    "no-multiple-empty-lines": [2, { max: 2 }],
+    "no-mixed-spaces-and-tabs": 2,
+    "space-unary-ops": 2,
+    "no-multi-spaces": 2,
+    "space-before-blocks": 2,
+    "space-before-function-paren": [2, "always"],
+    "keyword-spacing": 2,
+    "space-infix-ops": 2,
+    "object-curly-spacing": [2, "always"],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "no-trailing-spaces": 2,
+    "comma-dangle": 2,
+    "wrap-iife": 2,
+    "no-extra-semi": 2,
+    "semi-spacing": 2,
+    "semi": [2, "never"],
+    "spaced-comment": 2,
+    "func-names": 2,
+
+    // NodeJs rules
+    "block-scoped-var": 2,
+    "global-require": 2,
+    "no-mixed-requires": 2,
+    "no-new-require": 2,
+
+    // ES6 rules
+    "arrow-spacing": 2,
+    "no-const-assign": 2,
+    "no-var": 2,
+    "prefer-const": 2,
+
+    // React
+    "jsx-quotes": [2, "prefer-double"],
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
+
+    // JSDoc
+    "jsdoc/check-param-names": 1,
+    "jsdoc/check-tag-names": 1,
+    "jsdoc/check-types": 1,
+    "jsdoc/newline-after-description": 0,
+    "jsdoc/require-description-complete-sentence": 1,
+    "jsdoc/require-hyphen-before-param-description": 1,
+    "jsdoc/require-param": 1,
+    "jsdoc/require-param-description": 1,
+    "jsdoc/require-param-type": 1,
+    "jsdoc/require-returns-description": 1,
+    "jsdoc/require-returns-type": 1
+  }
+}

App/View/AboutView.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import {
+    View,
+    Text
+} from 'react-native'
+import baseStyles from '../baseStyles'
+
+export default class AboutView extends React.Component {
+
+  render () {
+    return (
+      <View style={baseStyles.view}>
+        <Text style={baseStyles.h3}>
+          About Us
+        </Text>
+
+        <Text style={baseStyles.link} onPress={() => this.props.nav.back()}>
+          &lang; Go Back
+        </Text>
+      </View>
+    )
+  }
+}

App/View/App.js

@@ -1,72 +1,33 @@
-/**
- * Sample React Native App
- * https://github.com/facebook/react-native
- * @flow
- */
-
 import React, { Component } from 'react'
-import {
-  AppRegistry,
-  StyleSheet,
-  Text,
-  View,
-  Platform,
-  TextInput
-} from 'react-native'
-const { GiftedForm } = require('react-native-gifted-form')
+import { StyleSheet, View } from 'react-native'
+
+import SimpleNavigator from './SimpleNavigator'
+import MainView from './MainView'
+import ContactUsView from './ContactUsView'
+import AboutView from './AboutView'
 
 export class App extends Component {
-  render() {
-    return (
-      <View style={styles.container}>
-        <Text style={styles.welcome}>
-          Welcome to React Native for {Platform.OS}!!!!
-        </Text>
-        <Text style={styles.instructions}>
-          To get started, edit index.{Platform.OS}.js YA!
-        </Text>
-        <Text style={styles.instructions}>
-          Press Cmd+R to reload,{'\n'}
-          { Platform.OS !== "web"?"Cmd+D or shake for dev menu":"" }
-        </Text>
+  state = {}
 
-        <GiftedForm style={styles.myForm}>
-            <GiftedForm.TextInputWidget
-                name='firstName'
-                title='First name'
-                placeholder='First name'
-                clearButtonMode='while-editing'
-            />
-            <GiftedForm.TextInputWidget
-                name='lastName'
-                title='Last name'
-                placeholder='Last name'
-                clearButtonMode='while-editing'
-            />
-        </GiftedForm>
+  render () {
+    return (
+      <View style={styles.view}>
+        <SimpleNavigator views={{
+          index: MainView,
+          contactUs: ContactUsView,
+          about: AboutView
+        }} />
       </View>
     )
   }
 }
 
 const styles = StyleSheet.create({
-  container: {
+  view: {
     flex: 1,
-    justifyContent: 'center',
+    justifyContent: 'flex-start',
     alignItems: 'center',
     backgroundColor: '#F5FCFF',
-  },
-  welcome: {
-    fontSize: 20,
-    textAlign: 'center',
-    margin: 10,
-  },
-  instructions: {
-    textAlign: 'center',
-    color: '#333333',
-    marginBottom: 5,
-  },
-  myForm: {
-    width: 400
+    paddingTop: 50
   }
-})
+})

App/View/ContactUsView.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import {
+    View,
+    Text
+} from 'react-native'
+import baseStyles from '../baseStyles'
+
+export default class ContactUsView extends React.Component {
+
+  render () {
+    return (
+      <View style={baseStyles.view}>
+        <Text style={baseStyles.h3}>
+          Contact Us
+        </Text>
+
+        <Text style={baseStyles.link} onPress={() => this.props.nav.linkTo('about')}>
+          About Us
+        </Text>
+
+        <Text style={baseStyles.link} onPress={() => this.props.nav.back()}>
+          &lang; Go Back
+        </Text>
+      </View>
+    )
+  }
+}

App/View/MainView.js

@@ -0,0 +1,72 @@
+import React from 'react'
+import {
+  StyleSheet,
+  Text,
+  View,
+  Platform
+} from 'react-native'
+import baseStyles from '../baseStyles'
+
+const { GiftedForm } = require('react-native-gifted-form')
+
+export default class MainView extends React.Component {
+  render () {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.welcome}>
+          Welcome to React Native for {Platform.OS}!
+        </Text>
+        <Text style={styles.instructions}>
+          To get started, edit App.js
+        </Text>
+        <Text style={styles.instructions}>
+          Press Cmd+R to reload,{'\n'}
+          { Platform.OS !== "web" ? "Cmd+D or shake for dev menu": "" }
+        </Text>
+
+        <Text style={baseStyles.link} onPress={() => this.props.nav.linkTo('contactUs')}>
+          Go to Contact Us
+        </Text>
+
+        <GiftedForm style={styles.myForm}>
+          <GiftedForm.TextInputWidget
+            name="firstName"
+            title="First name"
+            placeholder="First name"
+            clearButtonMode="while-editing"
+          />
+          <GiftedForm.TextInputWidget
+            name="lastName"
+            title="Last name"
+            placeholder="Last name"
+            clearButtonMode="while-editing"
+          />
+        </GiftedForm>
+
+      </View>
+    )
+  }
+}
+
+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,
+  },
+  myForm: {
+    marginTop: 20,
+    alignSelf: 'stretch'
+  }
+})

App/View/SimpleNavigator.js

@@ -0,0 +1,38 @@
+import React from 'react'
+import { View } from 'react-native'
+
+export default class SimpleNavigator extends React.Component {
+  state = {
+    currentView: null,
+    view: null
+  }
+  currentComp = null
+  history = []
+
+  back = () => {
+    this.history.pop()
+    const lastViewId = this.history[ this.history.length - 1 ]
+    this.setState({ currentView: lastViewId })
+  }
+
+  linkTo = (viewId) => {
+    this.history.push(viewId)
+    this.setState({ currentView: viewId })
+  }
+
+  render () {
+    if (this.state.currentView) {
+      this.currentComp = this.props.views[ this.state.currentView ]
+    } else {
+      this.history = ['index']
+      this.currentComp = this.props.views[ 'index' ]
+    }
+    const viewEl = <this.currentComp nav={this} />
+
+    return (
+      <View>
+        {viewEl}
+      </View>
+    )
+  }
+}

App/baseStyles.js

@@ -0,0 +1,18 @@
+import {
+  StyleSheet
+} from 'react-native'
+
+export default StyleSheet.create({
+  view: {
+    padding: 10,
+    paddingTop: 30,
+    backgroundColor: '#F5FCFF'
+  },
+  h3: {
+    fontSize: 20
+  },
+  link: {
+    color: 'darkblue',
+    marginTop: 20,
+  }
+})

README.md

@@ -2,7 +2,12 @@
 
 Rhinos-app is a react-native app which uses [react-native-web](https://github.com/necolas/react-native-web) to achieve cross-platform design. 
 
-![Demo image](https://s3-us-west-1.amazonaws.com/usw-files/581cae09337cb42aa7ab9365.3edebc80-4f0c-4ee4-ae12-14969ad8b789.jpg)
+![Demo image](https://s3-us-west-1.amazonaws.com/usw-files/581cae09337cb42aa7ab9365.e01c8e85-6249-4a2b-b323-7413bd02c478.jpg)
+
+## FEATURES:
+
+  * Runs on Android, iOS, Web (can run as a Windows/MacOS/Linux desktop app with Electron)
+  * Miscellaneous features: ESLint, Webpack, SimpleNavigator
 
 ## PREREQUISITES: