refactoring Theme and Components (#83)

* refactoring Theme and Components to use more Helpers and remove unnecessary styles

Author: JeremyDolle

App/Containers/Example/ExampleScreen.js

@@ -5,7 +5,7 @@ import { PropTypes } from 'prop-types'
 import ExampleActions from 'App/Stores/Example/Actions'
 import { liveInEurope } from 'App/Stores/Example/Selectors'
 import Style from './ExampleScreenStyle'
-import { Images } from 'App/Theme'
+import { ApplicationStyles, Helpers, Images, Metrics } from 'App/Theme'
 
 /**
  * This is an example of a container component.
@@ -26,13 +26,20 @@ class ExampleScreen extends React.Component {
 
   render() {
     return (
-      <View style={Style.container}>
+      <View
+        style={[
+          Helpers.fill,
+          Helpers.rowMain,
+          Metrics.mediumHorizontalMargin,
+          Metrics.mediumVerticalMargin,
+        ]}
+      >
         {this.props.userIsLoading ? (
           <ActivityIndicator size="large" color="#0000ff" />
         ) : (
           <View>
             <View style={Style.logoContainer}>
-              <Image style={Style.logo} source={Images.logo} resizeMode={'contain'} />
+              <Image style={Helpers.fullSize} source={Images.logo} resizeMode={'contain'} />
             </View>
             <Text style={Style.text}>To get started, edit App.js</Text>
             <Text style={Style.instructions}>{instructions}</Text>
@@ -49,13 +56,17 @@ class ExampleScreen extends React.Component {
                 </Text>
               </View>
             )}
-            <Button onPress={() => this._fetchUser()} title="Refresh" />
+            <Button
+              style={ApplicationStyles.button}
+              onPress={() => this._fetchUser()}
+              title="Refresh"
+            />
           </View>
         )}
       </View>
     )
   }
-  
+
   _fetchUser() {
     this.props.fetchUser()
   }

App/Containers/Example/ExampleScreenStyle.js

@@ -1,53 +1,32 @@
 import { StyleSheet } from 'react-native'
-import Fonts from 'App/Theme/Fonts'
-import ApplicationStyles from 'App/Theme/ApplicationStyles'
+import { Helpers, Metrics, Fonts, Colors } from 'App/Theme'
 
 export default StyleSheet.create({
-  container: {
-    ...ApplicationStyles.screen.container,
-    margin: 30,
-    flex: 1,
-    justifyContent: 'center',
-  },
-  title: {
-    ...Fonts.style.h2,
-    textAlign: 'center',
-    marginBottom: 10,
-  },
-  text: {
-    ...Fonts.style.normal,
+  error: {
+    ...Fonts.normal,
+    color: Colors.error,
+    marginBottom: Metrics.tiny,
     textAlign: 'center',
-    marginBottom: 5,
   },
   instructions: {
-    ...Fonts.style.normal,
-    textAlign: 'center',
-    marginBottom: 5,
+    ...Fonts.normal,
     fontStyle: 'italic',
-  },
-  loading: {
-    ...Fonts.style.normal,
-    textAlign: 'center',
-    marginBottom: 5,
-  },
-  result: {
-    ...Fonts.style.normal,
+    marginBottom: Metrics.tiny,
     textAlign: 'center',
-    marginBottom: 5,
-  },
-  error: {
-    ...Fonts.style.normal,
-    textAlign: 'center',
-    marginBottom: 5,
-    color: 'red',
   },
   logoContainer: {
-    width: '100%',
+    ...Helpers.fullWidth,
     height: 300,
     marginBottom: 25,
   },
-  logo: {
-    width: '100%',
-    height: '100%',
+  result: {
+    ...Fonts.normal,
+    marginBottom: Metrics.tiny,
+    textAlign: 'center',
+  },
+  text: {
+    ...Fonts.normal,
+    marginBottom: Metrics.tiny,
+    textAlign: 'center',
   },
 })

App/Containers/Root/RootScreen.js

@@ -2,10 +2,10 @@ import React, { Component } from 'react'
 import NavigationService from 'App/Services/NavigationService'
 import AppNavigator from 'App/Navigators/AppNavigator'
 import { View } from 'react-native'
-import styles from './RootScreenStyle'
 import { connect } from 'react-redux'
 import StartupActions from 'App/Stores/Startup/Actions'
 import { PropTypes } from 'prop-types'
+import { Helpers } from 'App/Theme'
 
 class RootScreen extends Component {
   componentDidMount() {
@@ -15,7 +15,7 @@ class RootScreen extends Component {
 
   render() {
     return (
-      <View style={styles.container}>
+      <View style={Helpers.fill}>
         <AppNavigator
           // Initialize the NavigationService (see https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
           ref={(navigatorRef) => {

App/Containers/Root/RootScreenStyle.js

@@ -1,12 +1,13 @@
 import React from 'react'
 import { Text, View } from 'react-native'
 import styles from './SplashScreenStyle'
+import { Helpers } from 'App/Theme'
 
 export default class SplashScreen extends React.Component {
   render() {
     return (
-      <View style={styles.container}>
-        <View style={styles.logo}>
+      <View style={[Helpers.fillRowCenter, styles.container]}>
+        <View style={[Helpers.center, styles.logo]}>
           {/* You will probably want to insert your logo here */}
           <Text>LOGO</Text>
         </View>

App/Containers/SplashScreen/SplashScreen.js

@@ -1,21 +1,13 @@
 import { StyleSheet } from 'react-native'
-import Colors from 'App/Theme/Colors'
-import ApplicationStyles from 'App/Theme/ApplicationStyles'
+import { Colors } from 'App/Theme'
 
 export default StyleSheet.create({
   container: {
-    ...ApplicationStyles.screen.container,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
     backgroundColor: Colors.primary,
   },
   logo: {
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
+    backgroundColor: Colors.white,
     height: 70,
     width: 70,
-    backgroundColor: 'white',
   },
 })

App/Containers/SplashScreen/SplashScreenStyle.js

@@ -3,11 +3,10 @@
  *
  * Use it to define generic component styles (e.g. the default text styles, default button styles...).
  */
+import Colors from './Colors'
 
 export default {
-  screen: {
-    container: {
-      flex: 1,
-    },
+  button: {
+    backgroundColor: Colors.primary,
   },
 }

App/Theme/ApplicationStyles.js

@@ -7,7 +7,8 @@
 
 export default {
   transparent: 'rgba(0,0,0,0)',
-  //Example colors:
+  // Example colors:
+  white: '#ffffff',
   text: '#212529',
   primary: '#007bff',
   success: '#28a745',

App/Theme/Colors.js

@@ -1,3 +1,5 @@
+import { StyleSheet } from 'react-native'
+
 const size = {
   h1: 38,
   h2: 34,
@@ -8,7 +10,7 @@ const size = {
   small: 12,
 }
 
-const style = {
+export default StyleSheet.create({
   h1: {
     fontSize: size.h1,
   },
@@ -21,9 +23,4 @@ const style = {
   normal: {
     fontSize: size.regular,
   },
-}
-
-export default {
-  size,
-  style,
-}
+})

App/Theme/Fonts.js

@@ -2,7 +2,7 @@ import Colors from './Colors'
 import Fonts from './Fonts'
 import Metrics from './Metrics'
 import Images from './Images'
-import ApplicationStyles from './ApplicationStyles'
 import Helpers from './Helpers'
+import ApplicationStyles from './ApplicationStyles'
 
-export { Colors, Fonts, Images, Metrics, ApplicationStyles, Helpers }
+export { Colors, Fonts, Images, Metrics, Helpers, ApplicationStyles }