Merge branch 'master' into readme

Author: Matthieu Napoli

App/App.js

@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
-import HomeScreen from 'App/Containers/HomeScreen'
 import { Provider } from 'react-redux'
 import { PersistGate } from 'redux-persist/lib/integration/react'
 import createStore from 'App/Stores'
+import ExampleScreen from './Containers/Example/ExampleScreen'
 
 const { store, persistor } = createStore()
 
@@ -21,7 +21,7 @@ export default class App extends Component {
          * @see https://github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md
          */}
         <PersistGate loading={null} persistor={persistor}>
-          <HomeScreen />
+          <ExampleScreen />
         </PersistGate>
       </Provider>
     )

App/Containers/Example/ExampleScreen.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { Platform, Text, View, Button } from 'react-native'
+import { connect } from 'react-redux'
+import { PropTypes } from 'prop-types'
+import ExampleActions from 'App/Stores/Example/Actions'
+import { isHot } from 'App/Stores/Example/Selectors'
+import Style from './ExampleScreenStyle'
+
+const instructions = Platform.select({
+  ios: 'Press Cmd+R to reload,\nCmd+D or shake for dev menu.',
+  android: 'Double tap R on your keyboard to reload,\nShake or press menu button for dev menu.',
+})
+
+class ExampleScreen extends React.Component {
+  componentDidMount() {
+    this.props.fetchTemperature()
+  }
+
+  render() {
+    let temperature = this.props.temperatureIsLoading ? '...' : this.props.temperature
+    if (temperature === null) {
+      temperature = '??'
+    }
+
+    return (
+      <View style={Style.container}>
+        <Text style={Style.title}>Welcome to React Native!</Text>
+        <Text style={Style.text}>To get started, edit App.js</Text>
+        <Text style={Style.text}>{instructions}</Text>
+        <Text style={Style.text}>The weather temperature is: {temperature}</Text>
+        <Text style={Style.text}>{this.props.isHot ? "It's pretty hot!" : ''}</Text>
+        <Text style={Style.text}>{this.props.temperatureErrorMessage}</Text>
+        <Button onPress={this.props.fetchTemperature} title="Refresh" />
+      </View>
+    )
+  }
+}
+
+ExampleScreen.propsTypes = {
+  temperature: PropTypes.number,
+  temperatureErrorMessage: PropTypes.string,
+}
+
+const mapStateToProps = (state) => ({
+  temperature: state.example.get('temperature'),
+  temperatureErrorMessage: state.example.get('temperatureErrorMessage'),
+  temperatureIsLoading: state.example.get('temperatureIsLoading'),
+  isHot: isHot(state),
+})
+
+const mapDispatchToProps = (dispatch) => ({
+  fetchTemperature: () => dispatch(ExampleActions.fetchTemperature()),
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(ExampleScreen)

App/Containers/Example/ExampleScreenStyle.js

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native'
+import Fonts from 'App/Theme/Fonts'
+import ApplicationStyles from 'App/Theme/ApplicationStyles'
+
+export default StyleSheet.create({
+  container: {
+    ...ApplicationStyles.screen.container,
+  },
+  title: {
+    ...Fonts.style.h1,
+    textAlign: 'center',
+    margin: 10,
+  },
+  text: {
+    ...Fonts.style.normal,
+    textAlign: 'center',
+    marginBottom: 5,
+  },
+})

App/Containers/HomeScreen.js

@@ -0,0 +1 @@
+This directory contains the application's images.

App/Images/README.md

@@ -6,7 +6,7 @@ import immutableTransform from 'redux-persist-transform-immutable'
 /**
  * This import defaults to localStorage for web and AsyncStorage for react-native.
  *
- * Kind in mind this storage *is not secure*. Do not use it to store sensitive information
+ * Keep in mind this storage *is not secure*. Do not use it to store sensitive information
  * (like API tokens, private and sensitive data, etc.).
  *
  * If you need to store sensitive information, use redux-persist-sensitive-storage.

App/Stores/CreateStore.js

@@ -0,0 +1,13 @@
+/**
+ * This file defines the base application styles.
+ *
+ * Use it to define generic component styles (e.g. the default text styles, default button styles...).
+ */
+
+export default {
+  screen: {
+    container: {
+      flex: 1,
+    },
+  },
+}

App/Theme/ApplicationStyles.js

@@ -0,0 +1,15 @@
+/**
+ * This file contains the application's colors.
+ *
+ * Define color here instead of duplicating them throughout the components.
+ * That allows to change them more easily later on.
+ */
+
+export default {
+  transparent: 'rgba(0,0,0,0)',
+  // Example colors:
+  text: '#212529',
+  primary: '#007bff',
+  success: '#28a745',
+  error: '#dc3545',
+}

App/Theme/Colors.js

@@ -0,0 +1,38 @@
+const type = {
+  base: 'inherit',
+}
+
+const size = {
+  h1: 38,
+  h2: 34,
+  h3: 30,
+  input: 18,
+  regular: 17,
+  medium: 14,
+  small: 12,
+}
+
+const style = {
+  h1: {
+    fontFamily: type.base,
+    fontSize: size.h1,
+  },
+  h2: {
+    fontFamily: type.base,
+    fontSize: size.h2,
+  },
+  h3: {
+    fontFamily: type.base,
+    fontSize: size.h3,
+  },
+  normal: {
+    fontFamily: type.base,
+    fontSize: size.regular,
+  },
+}
+
+export default {
+  type,
+  size,
+  style,
+}

App/Theme/Fonts.js

@@ -0,0 +1,7 @@
+/**
+ * Images should be stored in the `App/Images` directory and referenced using variables defined here.
+ */
+
+export default {
+  // logo: require('../Images/logo.png'),
+}