Merge pull request #12 from RealOrangeOne/improvements

Improvements

Author: RealOrangeOne

README.md

@@ -1,4 +1,4 @@
-# react-native-busy-indicator
+# React-Native Busy Indicator
 [![npm version](https://badge.fury.io/js/react-native-busy-indicator.svg)](https://badge.fury.io/js/react-native-busy-indicator)
 [![Circle CI](https://circleci.com/gh/RealOrangeOne/react-native-busy-indicator.svg)](https://circleci.com/gh/RealOrangeOne/react-native-busy-indicator)
 [![NPM downloads](http://img.shields.io/npm/dm/react-native-busy-indicator.svg?style=flat-square)](https://www.npmjs.com/package/react-native-busy-indicator)
@@ -31,7 +31,8 @@ Toggling the component can be done from any file, provided the component has alr
 ```js
 const loaderHandler = require('react-native-busy-indicator/LoaderHandler');
 
-loaderHandler.showLoader("Loading"); // Show indicator with message 'loading'
+loaderHandler.showLoader("Loading"); // Show indicator with message 'Loading'
+loaderHandler.showLoader("Loading More"); // Show indicator with message 'Loading More'
 
 loaderHandler.hideLoader();  // Hide the loader
 ```
@@ -48,12 +49,11 @@ loaderHandler.hideLoader();  // Hide the loader
 |**`textColor`**|`string`| text color|
 |**`textFontSize`**|`number`|text font size|
 |**`textNumberOfLines`**|`number`| total number of lines does not exceed this number. Default: 1|
+|**`Size`**|`small/large`| Size of the spinner. Default: small|
 
 
 ## Demo
 
 ![Demo](https://raw.githubusercontent.com/RealOrangeOne/react-native-busy-indicator/master/demo.gif)
 
-## License
-
-[MIT License](http://opensource.org/licenses/mit-license.html)
+__Note__: The spinner moves much smoother than shown in recording!

index.js

@@ -7,6 +7,7 @@ import {
   DeviceEventEmitter,
   ActivityIndicator
 } from 'react-native';
+
 const styles = StyleSheet.create({
   container: {
     position: 'absolute',
@@ -19,105 +20,119 @@ const styles = StyleSheet.create({
     right: 0,
     flex: 1
   },
+
   progressBar: {
     margin: 10,
     justifyContent: 'center',
     alignItems: 'center',
     padding: 10
   },
+
   nocontainer: {
     position: 'absolute',    
     top: 0,    
     left: 0,        
     width: 0.001,
     height: 0.001
-  }
-});
-
-const BusyIndicator = React.createClass({
-  propTypes: {
-    color: React.PropTypes.string,
-    overlayColor: React.PropTypes.string,
-    overlayHeight: React.PropTypes.number,
-    overlayWidth: React.PropTypes.number,
-    startVisible: React.PropTypes.bool,
-    text: React.PropTypes.string,
-    textColor: React.PropTypes.string,
-    textFontSize: React.PropTypes.number,
-    textNumberOfLines: React.PropTypes.number
   },
 
-  getDefaultProps() {
-    return {
-      isDismissible: false,
-      overlayWidth: 120,
-      overlayHeight: 100,
-      overlayColor: '#333333',
-      color: '#f5f5f5',
-      startVisible: false,
-      text: 'Please wait...',
-      textColor: '#f5f5f5',
-      textFontSize: 14,
-      textNumberOfLines: 1
-    };
+  overlay: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 10,
+    padding: 10
   },
 
-  getInitialState() {
-    return {
-      isVisible: this.props.startVisible
+  text: {
+    marginTop: 8
+  }
+});
+
+class BusyIndicator extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      isVisible: props.startVisible
     };
-  },
+  }
+
   componentDidMount () {
-    this.emitter = DeviceEventEmitter.addListener('changeLoadingEffect', this.changeLoadingEffect, null);
-  },
+    this.emitter = DeviceEventEmitter.addListener('changeLoadingEffect', this.changeLoadingEffect.bind(this));
+  }
 
   componentWillUnmount() {
     this.emitter.remove();
-  },
+  }
 
   changeLoadingEffect(state) {
     this.setState({
       isVisible: state.isVisible,
-      text: state.title ? state.title : 'Please wait...'
+      text: state.title ? state.title : this.props.text
     });
-  },
-
+  }
 
   render() {
+    if (!this.state.isVisible) {
+      return (<View style={styles.nocontainer} />);
+    }
+
     const customStyles = StyleSheet.create({
       overlay: {
-        alignItems: 'center',
-        justifyContent: 'center',
-        borderRadius: 10,
-        padding: 10,
         backgroundColor: this.props.overlayColor,
         width: this.props.overlayWidth,
         height: this.props.overlayHeight
       },
+      
       text: {
         color: this.props.textColor,
-        fontSize: this.props.textFontSize,
-        marginTop: 8
+        fontSize: this.props.textFontSize
       }
     });
 
-    if (!this.state.isVisible) {
-      return (<View style={[styles.nocontainer]} />);
-    } else {
-      return (
-        <View style={[styles.container]}>
-          <View style={customStyles.overlay}>
-            <ActivityIndicator
-              color={this.props.color}
-              size="small"
-              style={styles.progressBar}/>
-            <Text numberOfLines={this.props.textNumberOfLines} style={customStyles.text}>
-              {this.state.text}
-            </Text>
-          </View>
+    return (
+      <View style={styles.container}>
+        <View style={[styles.overlay, customStyles.overlay]}>
+          <ActivityIndicator
+            color={this.props.color}
+            size={this.props.size}
+            style={styles.progressBar} />
+
+          <Text
+            numberOfLines={this.props.textNumberOfLines}
+            style={[styles.text, customStyles.text]}>
+            {this.state.text}
+          </Text>
         </View>
-      );
-    }
+      </View>
+    );
   }
-});
+}
+
+BusyIndicator.propTypes = {
+  color: React.PropTypes.string,
+  overlayColor: React.PropTypes.string,
+  overlayHeight: React.PropTypes.number,
+  overlayWidth: React.PropTypes.number,
+  size: React.PropTypes.oneOf(['small', 'large']),
+  startVisible: React.PropTypes.bool,
+  text: React.PropTypes.string,
+  textColor: React.PropTypes.string,
+  textFontSize: React.PropTypes.number,
+  textNumberOfLines: React.PropTypes.number
+};
+
+BusyIndicator.defaultProps = {
+  isDismissible: false,
+  overlayWidth: 120,
+  overlayHeight: 100,
+  overlayColor: '#333333',
+  color: '#f5f5f5',
+  size: 'small',
+  startVisible: false,
+  text: 'Please wait...',
+  textColor: '#f5f5f5',
+  textFontSize: 14,
+  textNumberOfLines: 1
+};
+
 module.exports = BusyIndicator;

package.json

@@ -4,7 +4,7 @@
   "main": "index.js",
   "description": "A simple busy indicator which can be trigger from any child or navigated page in react native application",
   "scripts": {
-    "lint": "eslint index.js LoaderHandler.js",
+    "lint": "eslint index.js LoaderHandler.js scripts/ tests/",
     "mocha": "mocha --require babel-core/register scripts/test-helper.js --bail 'tests/**/*.test.js'",
     "test": "npm run lint && npm run mocha"
   },