diff --git a/Button.js b/Button.js
index 1d92526..83f9900 100644
--- a/Button.js
+++ b/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 (
)
} else {
return (
-
)
}
}
return (
- {children}
+ {this.props.children}
)
}
@@ -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 (
{this._renderInnerText()}
@@ -63,21 +53,9 @@ class Button extends Component {
style={[styles.button, this.props.style]}>
{this._renderInnerText()}
- )
+ )
}
}
-
- 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,
},
})
diff --git a/Example/button/package.json b/Example/button/package.json
index 4ce3d77..0ba7ce7 100644
--- a/Example/button/package.json
+++ b/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"
}
}
diff --git a/README.md b/README.md
index 33afdb8..2809be6 100644
--- a/README.md
+++ b/README.md
@@ -25,8 +25,7 @@ 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
```
+## 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.
diff --git a/package.json b/package.json
index 0ceddba..ed87128 100644
--- a/package.json
+++ b/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"