Added optional isLoading prop

Author: alvaromb

Button.js

@@ -1,8 +1,25 @@
-import React, { Component, TouchableOpacity, Text, StyleSheet, PropTypes } from 'react-native'
+import React, { Component, View, TouchableOpacity, Text, StyleSheet, PropTypes, ActivityIndicatorIOS, Platform } from 'react-native'
 import StyleSheetPropType from 'react-native/Libraries/StyleSheet/StyleSheetPropType'
 import TextStylePropTypes from 'react-native/Libraries/Text/TextStylePropTypes'
 
 class Button extends Component {
+  _renderInnerText () {
+    let children = this.props.children
+    if (this.props.isLoading) {
+      if (Platform.OS === 'ios') {
+        return <ActivityIndicatorIOS style={styles.spinner}
+            animating={true} size='small' color='black' />
+      } else {
+        children = 'Loading...'
+      }
+    }
+    return (
+      <Text style={[styles.textButton, this.props.textStyle]}>
+        {children}
+      </Text>
+    )
+  }
+
   render () {
     // Extract TouchableOpacity props
     let touchableProps = {
@@ -11,12 +28,17 @@ class Button extends Component {
       onPressOut: this.props.onPressOut,
       onLongPress: this.props.onLongPress
     }
+    if (this.props.isLoading) {
+      return (
+        <View style={[styles.button, this.props.style, styles.opacity]}>
+          {this._renderInnerText()}
+        </View>
+      )
+    }
     return (
       <TouchableOpacity {...touchableProps}
         style={[styles.button, this.props.style]}>
-        <Text style={[styles.textButton, this.props.textStyle]}>
-          {this.props.children}
-        </Text>
+        {this._renderInnerText()}
       </TouchableOpacity>
     )
   }
@@ -25,7 +47,8 @@ class Button extends Component {
 Button.propTypes = {
   ...TouchableOpacity.propTypes,
   textStyle: StyleSheetPropType(TextStylePropTypes),
-  children: PropTypes.string.isRequired
+  children: PropTypes.string.isRequired,
+  isLoading: PropTypes.bool,
 }
 
 let styles = StyleSheet.create({
@@ -42,6 +65,12 @@ let styles = StyleSheet.create({
     fontSize: 18,
     alignSelf: 'center',
   },
+  spinner: {
+    alignSelf: 'center',
+  },
+  opacity: {
+    opacity: 0.3,
+  },
 })
 
 export default Button

Example/button/index.ios.js

@@ -73,6 +73,14 @@ var button = React.createClass({
           }}>
           Hello
         </Button>
+        <Button
+          isLoading={true}
+          style={styles.buttonStyle7} textStyle={styles.textStyle6}
+          onPress={() => {
+            console.log('world!')
+          }}>
+          Hello
+        </Button>
       </View>
     );
   }

README.md

@@ -22,7 +22,11 @@ import Button from 'apsl-react-native-button'
 
 ## Usage
 
-Provide ``TouchableOpacity``' props to the component (including ``style``), ``textStyle``'s ``StyleSheet`` to customize the inner text and a children node to render. Check the included example for more options.
+Provide ``TouchableOpacity``' props to the component (including ``style``),
+``textStyle``'s ``StyleSheet`` to customize the inner text and a children node
+to render. You can also provide the ``isLoading`` prop that will dim the button
+and disable it to prevent accidental taps. Check the included example for more
+options.
 
 ```javascript
 <Button style={{backgroundColor: 'red'}} textStyle={{fontSize: 18}}>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apsl-react-native-button",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "React Native button component with rounded corners.",
   "main": "Button.js",
   "scripts": {
@@ -12,12 +12,18 @@
   },
   "keywords": [
     "react-native",
+    "ios",
+    "react-component",
+    "react",
     "button"
   ],
   "author": "Alvaro Medina Ballester",
   "license": "MIT",
   "bugs": {
     "url": "https://github.com/APSL/react-native-button/issues"
   },
-  "homepage": "https://github.com/APSL/react-native-button#readme"
+  "homepage": "https://github.com/APSL/react-native-button#readme",
+  "dependencies": {
+    "react-native": ">=0.11.0"
+  }
 }