Refactoring: Converted component based to pure functionial component.

.eslintrc.js

@@ -0,0 +1,30 @@
+'use strict';
+
+module.exports = {
+    parser: 'babel-eslint',
+    extends: 'airbnb',
+    plugins: [
+        'react',
+        'react-native'
+    ],
+    env: {
+        'jest': true,
+        'react-native/react-native': true
+    },
+    rules: {
+        // allow js file extension
+        'react/jsx-filename-extension': [
+            'error',
+            {
+                extensions: ['.js', '.jsx']
+            }
+        ],
+        // for post defining style object in react-native
+        'no-use-before-define': ['error', { variables: false }],
+        // react-native rules
+        'react-native/no-unused-styles': 2,
+        'react-native/split-platform-components': 2,
+        'react-native/no-inline-styles': 2,
+        'react-native/no-raw-text': 2,
+    }
+}

babel.config.js

@@ -1,6 +1,5 @@
-module.exports = function(api) {
-  api.cache(true);
-  return {
-    presets: ['babel-preset-expo'],
-  };
+module.exports = {
+  presets: [
+    'module:metro-react-native-babel-preset',
+  ],
 };

lib/src/components/StateView.js

@@ -1,88 +1,119 @@
-import React, { Component } from "react";
+import React from "react";
 import { Image, View, Text } from "react-native";
+import PropTypes from "prop-types";
 import Ripple from "react-native-material-ripple";
-import styles from "./styles/StateView.style";
+import styles, {
+  buttonContainer,
+  buttonTextContainer
+} from "./styles/StateView.style";
 
 const defaultImageSource = require("../../../assets/snow-globe.png");
 
-export default class StateView extends Component {
-  render() {
-    const {
-      style,
-      title,
-      onPress,
-      subtitle,
-      isCenter,
-      imageStyle,
-      titleStyle,
-      buttonText,
-      rippleColor,
-      buttonColor,
-      imageSource,
-      enableButton,
-      subtitleStyle,
-      rippleDuration,
-      buttonComponent,
-      imageResizeMode,
-      buttonTextColor,
-      buttonTextStyle,
-      buttonContainerStyle,
-      rippleContainerBorderRadius
-    } = this.props;
-    return (
-      <View style={style || { top: 0 }}>
-        <Image
-          style={[
-            imageStyle || { width: 150, height: 200 },
-            isCenter && styles.center
-          ]}
-          resizeMode={imageResizeMode || "contain"}
-          source={imageSource || defaultImageSource}
-        />
-        <Text
-          style={[isCenter && styles.center, titleStyle || styles.titleStyle]}
-        >
-          {title || " "}
-        </Text>
-        <Text
-          style={[
-            isCenter && styles.center,
-            subtitleStyle || styles.subTitleStyle
-          ]}
-        >
-          {subtitle || " "}
-        </Text>
-        {enableButton &&
-          (buttonComponent || (
-            <Ripple
-              onPress={onPress}
-              rippleColor={rippleColor || "white"}
-              rippleDuration={rippleDuration || 750}
-              style={
-                buttonContainerStyle || [
-                  styles.buttonContainer,
-                  {
-                    backgroundColor: buttonColor || "#FFAF10"
-                  }
-                ]
-              }
-              rippleContainerBorderRadius={rippleContainerBorderRadius || 16}
+const StateView = props => {
+  const {
+    style,
+    title,
+    onPress,
+    subtitle,
+    isCenter,
+    imageStyle,
+    titleStyle,
+    buttonText,
+    rippleColor,
+    buttonColor,
+    imageSource,
+    enableButton,
+    subtitleStyle,
+    rippleDuration,
+    buttonComponent,
+    imageResizeMode,
+    buttonTextColor,
+    buttonTextStyle,
+    buttonContainerStyle,
+    rippleContainerBorderRadius
+  } = props;
+  return (
+    <View style={style || styles.container}>
+      <Image
+        style={[imageStyle || styles.imageStyle, isCenter && styles.center]}
+        resizeMode={imageResizeMode || "contain"}
+        source={imageSource || defaultImageSource}
+      />
+      <Text
+        style={[isCenter && styles.center, titleStyle || styles.titleStyle]}
+      >
+        {title || " "}
+      </Text>
+      <Text
+        style={[
+          isCenter && styles.center,
+          subtitleStyle || styles.subTitleStyle
+        ]}
+      >
+        {subtitle || " "}
+      </Text>
+      {enableButton &&
+        (buttonComponent || (
+          <Ripple
+            onPress={onPress}
+            rippleColor={rippleColor || "white"}
+            rippleDuration={rippleDuration || 750}
+            style={buttonContainerStyle || buttonContainer(buttonColor)}
+            rippleContainerBorderRadius={rippleContainerBorderRadius || 16}
+          >
+            <Text
+              style={buttonTextStyle || buttonTextContainer(buttonTextColor)}
             >
-              <Text
-                style={
-                  buttonTextStyle || [
-                    styles.buttonTextContainer,
-                    {
-                      color: buttonTextColor || "white"
-                    }
-                  ]
-                }
-              >
-                {buttonText || "Let's Go!"}
-              </Text>
-            </Ripple>
-          ))}
-      </View>
-    );
-  }
-}
+              {buttonText || " "}
+            </Text>
+          </Ripple>
+        ))}
+    </View>
+  );
+};
+
+StateView.propTypes = {
+  style: PropTypes.object,
+  title: PropTypes.string,
+  onPress: PropTypes.func,
+  subtitle: PropTypes.string,
+  isCenter: PropTypes.bool,
+  imageStyle: PropTypes.object,
+  titleStyle: PropTypes.object,
+  buttonText: PropTypes.string,
+  rippleColor: PropTypes.string,
+  buttonColor: PropTypes.string,
+  enableButton: PropTypes.bool,
+  subtitleStyle: PropTypes.object,
+  rippleDuration: PropTypes.number,
+  buttonComponent: PropTypes.element,
+  imageResizeMode: PropTypes.string,
+  buttonTextColor: PropTypes.string,
+  buttonTextStyle: PropTypes.object,
+  buttonContainerStyle: PropTypes.object,
+  rippleContainerBorderRadius: PropTypes.number
+};
+
+StateView.defaultProps = {
+  style: styles.container,
+  title: "",
+  onPress: () => {},
+  subtitle: "",
+  isCenter: true,
+  imageStyle: styles.imageStyle,
+  titleStyle: styles.titleStyle,
+  buttonText: " ",
+  rippleColor: "white",
+  buttonColor: "#FFAF10",
+  enableButton: false,
+  subtitleStyle: styles.subTitleStyle,
+  rippleDuration: 750,
+  buttonComponent: null,
+  imageResizeMode: "contain",
+  buttonTextColor: "white",
+  buttonTextStyle: styles.buttonTextStyle,
+  buttonContainerStyle: styles.buttonContainerStyle,
+  rippleContainerBorderRadius: 16
+};
+
+export default StateView;

lib/src/components/styles/StateView.style.js

@@ -1,3 +1,24 @@
+
+
+export function buttonContainer(buttonColor) {
+  return ({
+    margin: 36,
+    paddingTop: 12,
+    borderRadius: 16,
+    paddingBottom: 12,
+    backgroundColor: buttonColor || "#FFAF10"
+  })
+}
+
+export function buttonTextContainer(buttonTextColor) {
+  return ({
+    fontSize: 16,
+    fontWeight: "700",
+    textAlign: "center",
+    color: buttonTextColor || "white"
+  })
+}
+
 export default {
   titleStyle: {
     padding: 16,
@@ -6,6 +27,7 @@ export default {
     textAlign: "center",
     color: "#6a758f"
   },
+  container: { top: 0 },
   subTitleStyle: {
     marginLeft: 16,
     marginRight: 16,
@@ -14,19 +36,9 @@ export default {
     textAlign: "center",
     color: "#6a758f"
   },
+  imageStyle: { width: 150, height: 200 },
   center: {
     alignSelf: "center",
     alignContent: "center"
   },
-  buttonContainer: {
-    margin: 36,
-    paddingTop: 12,
-    borderRadius: 16,
-    paddingBottom: 12
-  },
-  buttonTextContainer: {
-    fontSize: 16,
-    fontWeight: "700",
-    textAlign: "center"
-  }
 };