Updated code

.eslintrc

@@ -1,16 +1,19 @@
 {
-  "extends": ["eslint:recommended", "plugin:react-native/all", "plugin:react/all", "google"],
+  "extends": ["eslint:recommended", "plugin:react-native/all", "plugin:react/all", "google", "plugin:jest/recommended"],
   "globals": {
     "require": false
   },
   "plugins": [
     "react",
-    "react-native"
+    "babel",
+    "react-native",
+    "jest"
   ],
   "env": {
     "es6": true,
     "node": true,
-    "browser": true
+    "browser": true,
+    "jest": true
   },
   "ecmaFeatures": {
     "jsx": true,
@@ -24,18 +27,43 @@
     }
   },
   "rules": {
+    "indent": ["error", 2],
     "new-cap": 0,
-    "max-len": [2, 80],
+    "max-len": [2, {"code": 120, "ignoreTrailingComments": true}],
     "no-undef": 2,
-    "linebreak-style": 0,
-    "quote-props": 0,
-    "indent": [2, 2],
-
+    "require-jsdoc": 0,
+    "prefer-const": "error",
+    "arrow-spacing": "error",
+    "padding-line-between-statements": [
+      "error",
+      {"blankLine": "always", "prev": "*", "next": "return"}
+    ],
+    "jsx-quotes": "error",
+    "space-infix-ops": ["error", {"int32Hint": true}],
+    "space-unary-ops": [
+      1, {
+        "words": true,
+        "nonwords": false,
+        "overrides": {
+          "new": false,
+          "++": true
+        }
+    }],
+    "no-multiple-empty-lines": ["error", {"max": 1, "maxBOF": 1}],
     "react/forbid-component-props": 0,
     "react/forbid-prop-types": 0,
     "react/jsx-indent": [2, 2],
+    "react/jsx-indent-props": [2, 2],
     "react/jsx-no-literals": 0,
     "react/jsx-filename-extension": 0,
-    "react/no-set-state": 0
+    "react/no-set-state": 0,
+    "react/prefer-stateless-function": 0,
+    "react/no-multi-comp": [2, { "ignoreStateless": true }],
+    "react/jsx-one-expression-per-line": 0,
+    "react/destructuring-assignment": 0,
+    "no-invalid-this": 0,
+    "babel/no-invalid-this": 2,
+    "react/no-access-state-in-setstate": 0,
+    "react/prop-types": [2]
   }
 }

package.json

@@ -1,38 +1,69 @@
 {
-  "name": "react-native-image-fallback",
-  "description": "Image loader component with fallback options for React Native apps",
-  "main": "index.js",
-  "license": "MIT",
-  "version": "0.0.4",
-  "keywords": [
+  "extends": ["eslint:recommended", "plugin:react-native/all", "plugin:react/all", "google", "plugin:jest/recommended"],
+  "globals": {
+    "require": false
+  },
+  "plugins": [
+    "react",
+    "babel",
     "react-native",
-    "react-native-component",
-    "image-loader",
-    "fallback"
+    "jest"
   ],
-  "author": {
-    "name": "Mohomed Thahsan",
-    "email": "[email protected]"
-  },
-  "homepage": "https://github.com/mthahzan/react-native-image-fallback",
-  "bugs": {
-    "url": "https://github.com/mthahzan/react-native-image-fallback/issues"
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true,
+    "jest": true
   },
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/mthahzan/react-native-image-fallback.git"
+  "ecmaFeatures": {
+    "jsx": true,
+    "modules": true
   },
-  "devDependencies": {
-    "babel-eslint": "^7.2.3",
-    "babel-preset-react-native": "^1.9.2",
-    "eslint": "^3.19.0",
-    "eslint-config-google": "^0.7.1",
-    "eslint-plugin-react": "^7.0.1",
-    "eslint-plugin-react-native": "^2.3.2",
-    "react": "16.0.0-alpha.6",
-    "react-native": "0.44.2"
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
   },
-  "dependencies": {
-    "prop-types": "^15.5.10"
+  "rules": {
+    "indent": ["error", 2],
+    "new-cap": 0,
+    "max-len": [2, {"code": 120, "ignoreTrailingComments": true}],
+    "no-undef": 2,
+    "require-jsdoc": 0,
+    "prefer-const": "error",
+    "arrow-spacing": "error",
+    "padding-line-between-statements": [
+      "error",
+      {"blankLine": "always", "prev": "*", "next": "return"}
+    ],
+    "jsx-quotes": "error",
+    "space-infix-ops": ["error", {"int32Hint": true}],
+    "space-unary-ops": [
+      1, {
+        "words": true,
+        "nonwords": false,
+        "overrides": {
+          "new": false,
+          "++": true
+        }
+    }],
+    "no-multiple-empty-lines": ["error", {"max": 1, "maxBOF": 1}],
+    "react/forbid-component-props": 0,
+    "react/forbid-prop-types": 0,
+    "react/jsx-indent": [2, 2],
+    "react/jsx-indent-props": [2, 2],
+    "react/jsx-no-literals": 0,
+    "react/jsx-filename-extension": 0,
+    "react/no-set-state": 0,
+    "react/prefer-stateless-function": 0,
+    "react/no-multi-comp": [2, { "ignoreStateless": true }],
+    "react/jsx-one-expression-per-line": 0,
+    "react/destructuring-assignment": 0,
+    "no-invalid-this": 0,
+    "babel/no-invalid-this": 2,
+    "react/no-access-state-in-setstate": 0,
+    "react/prop-types": [2]
   }
 }

src/components/ImageLoader.js

@@ -11,7 +11,6 @@ import {Image} from 'react-native';
  * this will automatically fall back to the fallback image(s).
  */
 class ImageLoader extends React.PureComponent {
-
   /**
    * Image loader component constructor
    * @param {object} props Props passed to the component
@@ -52,23 +51,12 @@ class ImageLoader extends React.PureComponent {
     });
   }
 
-  /**
-   * Handles the input change event
-   * @param  {context} context Context of the React class
-   */
-  bindContextToCustomFunction(context) {
-    this.getAllImageSources = this.getAllImageSources.bind(context);
-    this.handleImageLoadStart = this.handleImageLoadStart.bind(context);
-    this.handleImageLoadSuccess = this.handleImageLoadSuccess.bind(context);
-    this.handleImageLoadError = this.handleImageLoadError.bind(context);
-    this.handleImageLoadEnd = this.handleImageLoadEnd.bind(context);
-  }
-
   /**
    * Get all the image sources from the props
+   * @param  {any}   props  The props to get the images from
    * @return {Array}        Array of image sources
    */
-  getAllImageSources(props) {
+  getAllImageSources = (props) => {
     // Create a new array
     let imageSources = [];
 
@@ -91,7 +79,7 @@ class ImageLoader extends React.PureComponent {
   /**
    * Handle image load start
    */
-  handleImageLoadStart() {
+  handleImageLoadStart = () => {
     // Notify the user what image we are trying to load
     this.props.onLoadStart(
       this.state.imageSources[this.state.currentImageIndex]
@@ -101,7 +89,7 @@ class ImageLoader extends React.PureComponent {
   /**
    * Handle image load error
    */
-  handleImageLoadSuccess() {
+  handleImageLoadSuccess = () => {
     // Notify the user what image is loaded
     this.props.onSuccess(
       this.state.imageSources[this.state.currentImageIndex]
@@ -111,7 +99,7 @@ class ImageLoader extends React.PureComponent {
   /**
    * Handle image load error
    */
-  handleImageLoadError() {
+  handleImageLoadError = () => {
     // Get the image sources and current index
     const {imageSources, currentImageIndex} = this.state;
 
@@ -136,7 +124,7 @@ class ImageLoader extends React.PureComponent {
   /**
    * Handle image load end
    */
-  handleImageLoadEnd() {
+  handleImageLoadEnd = () => {
     // Notify the user what image is loaded
     this.props.onLoadEnd(
       this.state.imageSources[this.state.currentImageIndex]
@@ -171,12 +159,12 @@ class ImageLoader extends React.PureComponent {
 
     return (
       <Image
-          {...this.props}
-          onError={this.handleImageLoadError}
-          onLoad={this.handleImageLoadSuccess}
-          onLoadEnd={this.handleImageLoadEnd}
-          onLoadStart={this.handleImageLoadStart}
-          source={source}
+        {...this.props}
+        onError={this.handleImageLoadError}
+        onLoad={this.handleImageLoadSuccess}
+        onLoadEnd={this.handleImageLoadEnd}
+        onLoadStart={this.handleImageLoadStart}
+        source={source}
       />
     );
   }
@@ -226,8 +214,8 @@ ImageLoader.propTypes = {
 ImageLoader.defaultProps = {
   fallback: null,
   onError: () => {},
-  onLoadStart: () => {},
   onLoadEnd: () => {},
+  onLoadStart: () => {},
   onSuccess: () => {},
 };