custom icon / add label text

README.md

@@ -10,13 +10,18 @@ Are you using [React](https://facebook.github.io/react/)?  Check out [React Prog
 
 ![progress-hud-screen](https://cloud.githubusercontent.com/assets/1627824/7716549/94f15754-fe61-11e4-9a59-358d460197f2.gif)
 
+## Requirements
+The icons is use [react-native-vector-icons](https://github.com/oblador/react-native-vector-icons)/FontAwesomes
+
 ## Install
 ```shell
 npm i --save react-native-progress-hud
 ```
 
+
 ## Usage
 Using the HUD in your app will usually look like this:
+
 ```js
 var ProgressHUD = require('react-native-progress-hud');
 
@@ -32,8 +37,10 @@ var YourComponent = React.createClass({
         <ProgressHUD
           isVisible={this.state.is_hud_visible}
           isDismissible={true}
-          overlayColor="rgba(0, 0, 0, 0.11)"
-        />
+          labelText="Success"
+          iconName="check"
+          iconSize={28}
+          overlayColor="rgba(0, 0, 0, 0.11)"/>
       </View>
     );
   }
@@ -84,6 +91,8 @@ The following props can be used to modify the HUD's style and/or behaviour:
 |__`isDismissible`__|_Boolean_|Optional|`false`|When set to true, the HUD is dismissed on user interaction.
 |__`overlayColor`__|_String_|Optional|`rgba(0, 0, 0, 0)`|Sets the color of the overlay.
 |__`color`__|_String_|Optional|`#000`|Sets the color of the spinner.
+|__`iconName`__|_String_|Optional|`optional`|Sets the icon of hud,if set icon, spinner will not be show, only icon.
+|__`iconSize`__|_String_|Optional|48|Sets icon size of hud.
 
 ## License
 Copyright (c) 2015, [Naoufal Kadhom](http://naoufal.com)

package.json

@@ -28,6 +28,7 @@
   },
   "homepage": "https://github.com/naoufal/react-native-progress-hud",
   "dependencies": {
+    "react-native-vector-icons": "^1.0.4",
     "react-tween-state": "0.0.5"
   },
   "devDependencies": {

src/index.js

@@ -2,12 +2,14 @@
 
 var React = require('react-native');
 var tweenState = require('react-tween-state');
+var Icon = require('react-native-vector-icons/FontAwesome');
 
 var {
   Image,
   StyleSheet,
   TouchableHighlight,
-  View
+  View,
+  Text
 } = React;
 
 var styles = require('./styles');
@@ -70,7 +72,8 @@ var ProgressHUD = React.createClass({
     return {
       isDismissible: false,
       color: '#000',
-      overlayColor: 'rgba(0, 0, 0, 0)'
+      overlayColor: 'rgba(0, 0, 0, 0)',
+      iconSize: 48
     };
   },
 
@@ -119,6 +122,34 @@ var ProgressHUD = React.createClass({
       this.getTweeningValue('rotate_deg')
     ).toString() + 'deg';
 
+
+    var labelView;
+    if (this.props.labelText) {
+      labelView = <Text style={styles.label}>{this.props.labelText}</Text>;
+    }
+
+    var iconView;
+    if (this.props.iconName) {
+      iconView = <Icon name={this.props.iconName} size={this.props.iconSize} color="#CACACA"/>;
+    }else{
+      iconView = <Image
+            style={[styles.spinner, {
+              backgroundColor: this.props.color,
+              transform: [
+                {rotate: deg}
+              ]
+            }]}
+            source={{
+              uri: 'data:image/png;base64,' + images['1x'],
+              isStatic: true
+            }}
+          >
+
+            <View style={styles.inner_spinner}>
+            </View>
+          </Image>;
+    }
+
     return (
       /*jshint ignore:start */
       <TouchableHighlight
@@ -135,21 +166,8 @@ var ProgressHUD = React.createClass({
             left: this.getTweeningValue('left')
           }]}
         >
-          <Image
-            style={[styles.spinner, {
-              backgroundColor: this.props.color,
-              transform: [
-                {rotate: deg}
-              ]
-            }]}
-            source={{
-              uri: 'data:image/png;base64,' + images['1x'],
-              isStatic: true
-            }}
-          >
-            <View style={styles.inner_spinner}>
-            </View>
-          </Image>
+          {iconView}
+          {labelView}
         </View>
       </TouchableHighlight>
       /*jshint ignore:end */

src/styles.js

@@ -21,7 +21,8 @@ var styles = StyleSheet.create({
     width: 100,
     height: 100,
     borderRadius: 16,
-    backgroundColor: '#FFFFFF'
+    backgroundColor: '#000000',
+    opacity: 0.6
   },
   spinner: {
     alignItems: 'center',
@@ -34,7 +35,11 @@ var styles = StyleSheet.create({
     width: 42,
     height: 42,
     borderRadius: 42 / 2,
-    backgroundColor: '#FFFFFF'
+    backgroundColor: '#000'
+  },
+  label: {
+    paddingTop: 10,
+    color: '#FFFFFF'
   }
 });