Added disabled state and refactored code. Extended README.

Updated example

Author: alvaromb

Button.js

@@ -1,43 +1,33 @@
-import React, { Component, View, TouchableOpacity, Text, StyleSheet, PropTypes, ActivityIndicatorIOS, ProgressBarAndroid, Platform } from 'react-native'
+import React, { View, TouchableOpacity, Text, StyleSheet, PropTypes, ActivityIndicatorIOS, ProgressBarAndroid, Platform } from 'react-native'
 import StyleSheetPropType from 'react-native/Libraries/StyleSheet/StyleSheetPropType'
 import TextStylePropTypes from 'react-native/Libraries/Text/TextStylePropTypes'
 
-class Button extends Component {
-  constructor(props) {
-    super(props)
-    
-    this.state = {
-      isLoading: (this.props.isLoading === true ? true : false),
-      isDisabled: (this.props.isDisabled === true ? true : false),
-    }
-  }
-  
+class Button extends React.Component {
   _renderInnerText () {
-    let children = this.props.children
-    if (this.state.isLoading) {
+    if (this.props.isLoading) {
       if (Platform.OS !== 'android') {
         return (
           <ActivityIndicatorIOS
             animating={true}
-            size="small"
+            size='small'
             style={styles.spinner}
-            color='black'
+            color={this.props.activityIndicatorColor || 'black'}
           />
         )
       } else {
         return (
-          <ProgressBarAndroid 
+          <ProgressBarAndroid
             style={[{
               height: 20,
             }, styles.spinner]}
-            styleAttr="Inverse"
+            styleAttr='Inverse'
           />
         )
       }
     }
     return (
       <Text style={[styles.textButton, this.props.textStyle]}>
-        {children}
+        {this.props.children}
       </Text>
     )
   }
@@ -50,8 +40,8 @@ class Button extends Component {
       onPressOut: this.props.onPressOut,
       onLongPress: this.props.onLongPress
     }
-    
-    if (this.state.isDisabled === true || this.state.isLoading === true) {
+
+    if (this.props.isDisabled === true || this.props.isLoading === true) {
       return (
         <View style={[styles.button, this.props.style, styles.opacity]}>
           {this._renderInnerText()}
@@ -63,21 +53,9 @@ class Button extends Component {
           style={[styles.button, this.props.style]}>
           {this._renderInnerText()}
         </TouchableOpacity>
-      )      
+      )
     }
   }
-  
-  setIsLoading(val = false) {
-    this.setState({
-      isLoading: Boolean(val)
-    })
-  }
-  
-  setIsDisabled(val = false) {
-    this.setState({
-      isDisabled: Boolean(val)
-    })
-  }
 }
 
 Button.propTypes = {
@@ -86,9 +64,10 @@ Button.propTypes = {
   children: PropTypes.string.isRequired,
   isLoading: PropTypes.bool,
   isDisabled: PropTypes.bool,
+  activityIndicatorColor: PropTypes.string,
 }
 
-let styles = StyleSheet.create({
+const styles = StyleSheet.create({
   button: {
     height: 44,
     flexDirection: 'row',
@@ -106,7 +85,7 @@ let styles = StyleSheet.create({
     alignSelf: 'center',
   },
   opacity: {
-    opacity: 0.3,
+    opacity: 0.5,
   },
 })
 

Example/button/package.json

@@ -6,7 +6,7 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
-    "apsl-react-native-button": "^2.1.0",
+    "apsl-react-native-button": "^2.2.0",
     "react-native": "^0.12.0"
   }
 }

README.md

@@ -25,15 +25,30 @@ import Button from 'apsl-react-native-button'
 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.
+and disable it to prevent accidental taps.
 
 ```javascript
 <Button style={{backgroundColor: 'red'}} textStyle={{fontSize: 18}}>
   Hello!
 </Button>
 ```
 
+## API
+
+| Prop | Type | Description |
+-----------------------------
+| ``onPress`` | ``func`` | Function to execute when the ``onPress`` event is triggered. |
+| ``onPressIn`` | ``func`` | Function to execute when the ``onPressIn`` event is triggered. |
+| ``onPressOut`` | ``func`` | Function to execute when the ``onPressOut`` event is triggered. |
+| ``onLongPress`` | ``func`` | Function to execute when the ``onLongPress`` event is triggered. |
+| ``textStyle`` | ``StyleSheetPropType(TextStylePropTypes)`` | The StyleSheet to apply to the inner button text. |
+| ``children`` | ``string`` | The ``string`` to render as the text button. |
+| ``isLoading`` | ``bool`` | Renders an inactive state dimmed button with a spinner if ``true``. |
+| ``isDisabled`` | ``bool`` | Renders an inactive state dimmed button if ``true``. |
+| ``activityIndicatorColor`` | ``string`` | **iOS only**. Sets the button of the ``ActivityIndicatorIOS`` in the loading state. |
+
+Check the included example for more options.
+
 ## License
 
 MIT.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apsl-react-native-button",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "React Native button component with rounded corners.",
   "main": "Button.js",
   "scripts": {
@@ -13,6 +13,7 @@
   "keywords": [
     "react-native",
     "ios",
+    "android",
     "react-component",
     "react",
     "button"