diff --git a/README.md b/README.md
index 4617084..a9ef947 100644
--- a/README.md
+++ b/README.md
@@ -28,8 +28,7 @@ import React, { Component } from 'react';
import {
AppRegistry,
View,
- StyleSheet,
- Text
+ StyleSheet
} from 'react-native';
import AwesomeButton from 'react-native-awesome-button';
@@ -40,19 +39,19 @@ const styles = StyleSheet.create({
margin: 30,
marginTop: 560
}
-})
+});
class Simple extends Component {
handleButtonPress() {
- console.log('I was pressed')
+ console.log('I was pressed');
}
render() {
return (
- )
+ );
}
}
-AppRegistry.registerComponent('Simple', () => Simple)
+AppRegistry.registerComponent('Simple', () => Simple);
```
@@ -97,10 +96,11 @@ import React, { Component } from 'react';
import {
AppRegistry,
View,
- StyleSheet,
- Text
+ StyleSheet
} from 'react-native';
import AwesomeButton from 'react-native-awesome-button';
+import { Icon } from 'react-native-material-design';
+
const styles = StyleSheet.create({
container: {
@@ -109,7 +109,7 @@ const styles = StyleSheet.create({
margin: 30,
marginTop: 560
}
-})
+});
export default class Advanced extends Component {
constructor(props) {
@@ -123,7 +123,7 @@ export default class Advanced extends Component {
handleLogin() {
this.setState({ buttonState: 'busy' });
setTimeout(() => {
- this.setState({ buttonState: 'success' })
+ this.setState({ buttonState: 'success' });
}, 2500);
}
@@ -131,9 +131,11 @@ export default class Advanced extends Component {
return (
,
+ iconAlignment: 'left',
backgroundStyle: {
backgroundColor: 'blue',
minHeight: 60,
@@ -166,15 +168,14 @@ export default class Advanced extends Component {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 30
- },
- onPress: this.handleButtonPress
+ }
}
}}
transitionDuration={400}
buttonState={this.state.buttonState}
/>
- )
+ );
}
}
@@ -212,11 +213,17 @@ Each state in the states object should have a unique key. For each of these keys
|**`onPress`**|`function`|The function fired when the button is pressed. If not defined the button has no press functionality and simply renders as a view|
|**`spinner`**|`bool`|If true the button will show a spinner on the left hand side of the label when in this state|
|**`text`**|`string`|The label of the button when in this state|
+|**`icon`**|`string`|The view (e.g. an icon) to render next to the text (any View will be accepted|
+|**`iconAlignment`**|`string`|Whether to put icon on the left hand or right hand side of text. Accepts 'left' or 'right'|
|**`backgroundStyle`**|`object`|An object with styling for the background view of the button in the given state|
|**`labelStyle`**|`object`|An object with styling for the label text of the button in the given state|
### Versions
+v 1.8.0
+ - Added feature to include an icon (any View will be accepted) to left or right hand side of text (see Advanced example)
+ - Fixed linting errors in examples
+
v 1.7.0 Major refactoring adding several improvements (and a few breaking changes):
- Background Style now accepts same styling properties as the component View
- Label Style now accepts same styling properties as the component Text
@@ -227,6 +234,8 @@ v 1.7.0 Major refactoring adding several improvements (and a few breaking chang
### Roadmap
- Add tests
- Add animations on other props (e.g. labelStyle or width)
+ - Add smooth fade in/out of text at "center timing" of animation to sync effects
+ - Add Android examples
### Contributing
diff --git a/examples/Advanced/index.ios.js b/examples/Advanced/index.ios.js
index 38b2e94..71ea48f 100644
--- a/examples/Advanced/index.ios.js
+++ b/examples/Advanced/index.ios.js
@@ -5,6 +5,8 @@ import {
StyleSheet
} from 'react-native';
import AwesomeButton from 'react-native-awesome-button';
+import { Icon } from 'react-native-material-design';
+
const styles = StyleSheet.create({
container: {
@@ -38,6 +40,8 @@ export default class Advanced extends Component {
states={{
idle: {
text: 'Log In',
+ icon: ,
+ iconAlignment: 'left',
backgroundStyle: {
backgroundColor: 'blue',
minHeight: 60,
diff --git a/examples/Advanced/package.json b/examples/Advanced/package.json
index 6a35f92..9866f46 100644
--- a/examples/Advanced/package.json
+++ b/examples/Advanced/package.json
@@ -1,23 +1,24 @@
{
- "name": "Advanced",
- "version": "0.0.1",
- "private": true,
- "scripts": {
- "start": "node node_modules/react-native/local-cli/cli.js start",
- "test": "jest"
- },
- "dependencies": {
- "react": "15.4.2",
- "react-native": "0.41.2",
- "react-native-awesome-button": "1.7.0"
- },
- "devDependencies": {
- "babel-jest": "19.0.0",
- "babel-preset-react-native": "1.9.1",
- "jest": "19.0.1",
- "react-test-renderer": "15.4.2"
- },
- "jest": {
- "preset": "react-native"
- }
-}
\ No newline at end of file
+ "name": "Advanced",
+ "version": "0.0.1",
+ "private": true,
+ "scripts": {
+ "start": "node node_modules/react-native/local-cli/cli.js start",
+ "test": "jest"
+ },
+ "dependencies": {
+ "react": "15.4.2",
+ "react-native": "0.41.2",
+ "react-native-awesome-button": "^1.8.0",
+ "react-native-material-design": "^0.3.7"
+ },
+ "devDependencies": {
+ "babel-jest": "19.0.0",
+ "babel-preset-react-native": "1.9.1",
+ "jest": "19.0.1",
+ "react-test-renderer": "15.4.2"
+ },
+ "jest": {
+ "preset": "react-native"
+ }
+}
diff --git a/examples/Simple/package.json b/examples/Simple/package.json
index 7658d17..9697832 100644
--- a/examples/Simple/package.json
+++ b/examples/Simple/package.json
@@ -9,7 +9,7 @@
"dependencies": {
"react": "15.4.2",
"react-native": "0.41.2",
- "react-native-awesome-button": "1.7.0"
+ "react-native-awesome-button": "1.8.0"
},
"devDependencies": {
"babel-jest": "19.0.0",
diff --git a/package.json b/package.json
index bc3c3f4..3982ab6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "react-native-awesome-button",
- "version": "1.7.0",
+ "version": "1.8.0",
"description": "A React Native component rendering a button supporting showing different appearances and functionality given the passed props",
"main": "index.js",
"scripts": {
diff --git a/src/AwesomeButton.js b/src/AwesomeButton.js
index 70e7ef3..32597b5 100644
--- a/src/AwesomeButton.js
+++ b/src/AwesomeButton.js
@@ -44,7 +44,15 @@ class AwesomeButton extends Component {
}
render() {
- const { backgroundStyle, labelStyle, text, spinner, onPress } = this.state.viewState;
+ const {
+ backgroundStyle,
+ labelStyle,
+ text,
+ spinner,
+ onPress,
+ icon,
+ iconAlignment
+ } = this.state.viewState;
const backgroundColor = this.state.backgroundColor.interpolate({
inputRange: [0, 1],
outputRange: this.state.prevBackgroundColor ?
@@ -60,6 +68,8 @@ class AwesomeButton extends Component {
spinner={spinner}
onPress={onPress}
disabled={onPress ? false : true}
+ icon={icon}
+ iconAlignment={iconAlignment}
/>
);
diff --git a/src/ButtonView.js b/src/ButtonView.js
index 630cdab..e184c02 100644
--- a/src/ButtonView.js
+++ b/src/ButtonView.js
@@ -15,11 +15,19 @@ const ButtonView = (props) => {
>
+ { (props.icon && props.iconAlignment === 'left') ?
+ props.icon
+ : null
+ }
{ props.spinner ?
: null
}
{props.text}
+ { (props.icon && props.iconAlignment === 'right') ?
+ props.icon
+ : null
+ }
@@ -33,7 +41,9 @@ ButtonView.propTypes = {
text: PropTypes.string,
onPress: PropTypes.func,
spinner: PropTypes.bool,
- disabled: PropTypes.bool
+ disabled: PropTypes.bool,
+ icon: PropTypes.element,
+ iconAlignment: PropTypes.string
};
ButtonView.defaultProps = {
@@ -54,6 +64,8 @@ ButtonView.defaultProps = {
text: 'Click here',
spinner: false,
disabled: true,
+ icon: null,
+ iconAlignment: null,
onPress: (() => {}) // work-around to suppress eslinters no-default-prop
};