Upgrade to react_native_base

.github/CONTRIBUTING.md

@@ -0,0 +1,4 @@
+# Contributing to this Base
+* First make sure your contribution works on iOS/Android/XDE
+* Make sure tests pass (whenever we add those)
+* Run `standard` for JS linting and this code is compliant

.github/ISSUE_TEMPLATE.md

@@ -0,0 +1,4 @@
+### Make sure verify the following before submitting an issue.
+
+- [ ] Issued does not already exist
+- [ ] You have example code or some other recreatable experiment that we can verify

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,5 @@
+### Pull-Request Checklist
+
+- [ ] Works on iOS/Android/XDE
+- [ ] Tests Pass
+- [ ] Code is StandardJS compliant

App/Actions/CreateAction.js

@@ -0,0 +1,7 @@
+/**
+  Creates an action.
+  @param {string} type - The type of action.
+  @param {object} params - The rest of the properties of the action.
+  @return {object} The assembled action object.
+ */
+export default (type, params = null) => ({ type, ...params })

App/Actions/Creators.js

@@ -0,0 +1,33 @@
+import createAction from './CreateAction'
+import Types from './Types'
+
+const attemptLogin = (username, password) =>
+  createAction(Types.LOGIN_ATTEMPT, { username, password })
+
+const loginSuccess = (username) =>
+  createAction(Types.LOGIN_SUCCESS, { username })
+
+const loginFailure = (errorCode) =>
+  createAction(Types.LOGIN_FAILURE, { errorCode })
+
+const logout = () => createAction(Types.LOGOUT)
+
+const startup = () => createAction(Types.STARTUP)
+
+const requestTemperature = (city) => createAction(Types.TEMPERATURE_REQUEST, { city })
+const receiveTemperature = (temperature) => createAction(Types.TEMPERATURE_RECEIVE, { temperature })
+const receiveTemperatureFailure = () => createAction(Types.TEMPERATURE_FAILURE)
+
+/**
+ Makes available all the action creators we've created.
+ */
+export default {
+  attemptLogin,
+  loginSuccess,
+  loginFailure,
+  logout,
+  startup,
+  requestTemperature,
+  receiveTemperature,
+  receiveTemperatureFailure
+}

App/Actions/README.md

@@ -0,0 +1,14 @@
+# Redux Actions
+
+### Types.js
+
+Types are just strings authored within a CONSTANT_STYLE and tucked
+inside a object literal.
+
+### Creators.js
+
+Action creators provide a way to generate actions.
+
+### CreateAction.js
+
+This is a helper function to help generate action creators.

App/Actions/Types.js

@@ -0,0 +1,11 @@
+// A list of all actions in the system.
+export default {
+  LOGIN_ATTEMPT: 'LOGIN_ATTEMPT',
+  LOGIN_SUCCESS: 'LOGIN_SUCCESS',
+  LOGIN_FAILED: 'LOGIN_FAILED',
+  LOGOUT: 'LOGOUT',
+  STARTUP: 'STARTUP',
+  TEMPERATURE_REQUEST: 'TEMPERATURE_REQUEST',
+  TEMPERATURE_RECEIVE: 'TEMPERATURE_RECEIVE',
+  TEMPERATURE_FAILURE: 'TEMPERATURE_FAILURE'
+}

App/Components/Button.js

@@ -1,9 +1,5 @@
-import React, {
-  Component,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import styles from '../Styles/RootStyle'
+import React, { Component, Text, TouchableOpacity } from 'react-native'
+import styles from '../Styles/Components/ButtonStyle'
 
 export default class Button extends React.Component {
 

App/Components/ListItem.js

@@ -1,9 +1,5 @@
-import React, {
-  View,
-  Text,
-  TouchableOpacity,
-} from 'react-native';
-import styles from '../Styles/RootStyle'
+import React, { View, Text, TouchableOpacity } from 'react-native'
+import styles from '../Styles/Components/ListItemStyle'
 
 export default class Button extends React.Component {
 

App/Components/ProgressiveImage.js

@@ -0,0 +1,75 @@
+/* Example Usage
+  style={styles.imageStyles}
+  source='http://stockphotos.com/photo1.jpg'
+  thumbnail='http://stockphotos.com/thumbnail1.jpg'
+*/
+
+import React, { Image, Animated, View } from 'react-native'
+// import { Images } from '../Themes'
+
+export default class ProgressiveImage extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      thumbnailOpacity: new Animated.Value(0)
+    }
+  }
+
+  static propTypes = {
+    key: React.PropTypes.string,
+    thumbnail: React.PropTypes.string,
+    source: React.PropTypes.string,
+    style: React.PropTypes.number
+  };
+
+  mainImageLoad () {
+    window.requestAnimationFrame((time) => {
+      Animated.timing(this.state.thumbnailOpacity, {
+        toValue: 0,
+        duration: 250
+      }).start()
+    })
+  }
+
+  onThumbnailLoad () {
+    Animated.timing(this.state.thumbnailOpacity, {
+      toValue: 1,
+      duration: 250
+    }).start()
+  }
+
+  handleImage () {
+    if (this.props.source || this.props.thumbnail) {
+      return (
+        <View>
+          <Animated.Image
+            resizeMode={'cover'}
+            style={[{position: 'absolute'}, this.props.style]}
+            source={{uri: this.props.source}}
+            onLoad={this.mainImageLoad.bind(this)} />
+          <Animated.Image
+            resizeMode={'cover'}
+            style={[{opacity: this.state.thumbnailOpacity}, this.props.style]}
+            source={{uri: this.props.thumbnail}}
+            onLoad={this.onThumbnailLoad.bind(this)} />
+        </View>
+      )
+    } else {
+      return (
+        <Image style={this.props.style} resizeMode={'contain'} />
+      )
+    }
+  }
+
+  render () {
+    return (
+      <View
+        width={this.props.style.width}
+        height={this.props.style.height}
+        backgroundColor={'#CCC'}
+      >
+      {this.handleImage()}
+      </View>
+    )
+  }
+}

App/Components/SettingsModal.js

@@ -2,9 +2,15 @@ import React, {Component} from 'react'
 import {
   GiftedForm, GiftedFormManager
 } from 'react-native-gifted-form'
+import Store from 'react-native-simple-store'
 
 export default class SettingsModal extends Component {
 
+  componentDidMount(props) {
+    console.log("giftedform mounted!")
+  }
+
+
   defaults(){
     return {
       taxEnabled: true,

App/Config/DebugSettings.js

@@ -0,0 +1,8 @@
+const SETTINGS = {
+  useFixtures: false,
+  ezLogin: false,
+  yellowBox: __DEV__,
+  reduxLogging: true
+}
+
+export default SETTINGS

App/Config/README.md

@@ -0,0 +1,4 @@
+### Config Folder
+All application specific configuration falls in this folder.
+
+`DebugSettings.js` is used for development-wide globals.

App/Containers/AllComponentsScreen.js

@@ -0,0 +1,92 @@
+// An All Components Screen is a great way to dev and quick-test components
+import React, { View, ScrollView, Text, TouchableOpacity, PropTypes } from 'react-native'
+import { connect } from 'react-redux'
+import styles from '../Styles/AllComponentsScreenStyle'
+import ProgressiveImage from '../Components/ProgressiveImage'
+import { Images } from '../Themes'
+import Actions from '../Actions/Creators'
+import Routes from '../Navigation/Routes'
+
+export default class AllComponentsScreen extends React.Component {
+
+  constructor (props) {
+    super(props)
+    this.state = {}
+    this.handlePressLogin = this.handlePressLogin.bind(this)
+    this.handlePressLogout = this.handlePressLogout.bind(this)
+  }
+
+  static propTypes = {
+    navigator: PropTypes.object.isRequired,
+    loggedIn: PropTypes.bool,
+    dispatch: PropTypes.func,
+    temperature: PropTypes.string,
+    city: PropTypes.string
+  };
+
+  // fires when the user presses the login button
+  handlePressLogin () {
+    const { navigator } = this.props
+    const route = Routes.LoginScreen
+    navigator.push(route)
+  }
+
+  // fires when the user presses the logout button
+  handlePressLogout () {
+    const { dispatch } = this.props
+    dispatch(Actions.logout())
+  }
+
+  renderLoginButton () {
+    return (
+      <View style={styles.loginBox}>
+        <TouchableOpacity onPress={this.handlePressLogin}>
+          <View style={styles.loginButton}>
+            <Text style={styles.loginText}>Sign In</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  renderLogoutButton () {
+    return (
+      <View style={styles.loginBox}>
+        <TouchableOpacity onPress={this.handlePressLogout}>
+          <View style={styles.loginButton}>
+            <Text style={styles.loginText}>Log out</Text>
+          </View>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  render () {
+    const { loggedIn, temperature, city } = this.props
+    return (
+      <ScrollView style={styles.screenContainer}>
+        <Text style={styles.componentLabel}>Login/Logout Redux + Sagas Example</Text>
+        {loggedIn ? this.renderLogoutButton() : this.renderLoginButton()}
+        <Text style={styles.componentLabel}>Progressive Image Component</Text>
+        <ProgressiveImage
+          style={styles.progressiveImage}
+          defaultSource={Images.logo}
+          source='https://upload.wikimedia.org/wikipedia/commons/c/cc/ESC_large_ISS022_ISS022-E-11387-edit_01.JPG'
+          thumbnail='http://i.imgur.com/eVAFUhj.png'
+        />
+        <Text style={styles.componentLabel}>Http Client: {city}</Text>
+        <Text style={styles.temperature}>{temperature && `${temperature} F`}</Text>
+      </ScrollView>
+    )
+  }
+}
+
+const mapStateToProps = (state) => {
+  return {
+    loggedIn: state.login.username !== null,
+    temperature: state.weather.temperature,
+    city: state.weather.city
+  }
+}
+
+export default connect(mapStateToProps)(AllComponentsScreen)