1.8.0 release

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 (
       <View style={styles.container}>
         <AwesomeButton
-          states={{ 
+          states={{
             default: {
               backgroundStyle: {
                 backgroundColor: 'red',
@@ -66,11 +65,11 @@ class Simple extends Component {
           }}
         />
       </View>
-    )
+    );
   }
 }
 
-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,17 +123,19 @@ export default class Advanced extends Component {
   handleLogin() {
     this.setState({ buttonState: 'busy' });
     setTimeout(() => {
-      this.setState({ buttonState: 'success' })
+      this.setState({ buttonState: 'success' });
     }, 2500);
   }
 
   render() {
     return (
       <View style={styles.container}>
         <AwesomeButton
-          states={{ 
+          states={{
             idle: {
               text: 'Log In',
+              icon: <Icon name="person" color="rgba(255, 0, 0, .9)" />,
+              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}
         />
       </View>
-    )
+    );
   }
 }
 
@@ -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

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: <Icon name="person" color="rgba(255, 0, 0, .9)" />,
+              iconAlignment: 'left',
               backgroundStyle: {
                 backgroundColor: 'blue',
                 minHeight: 60,

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"
-	}
-}
+  "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"
+  }
+}

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",

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": {

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}
         />
       </View>
     );

src/ButtonView.js

@@ -15,11 +15,19 @@ const ButtonView = (props) => {
     >
       <Animated.View style={styles.backgroundStyle}>
         <View style={{ flexDirection: 'row' }}>
+          { (props.icon && props.iconAlignment === 'left') ?
+            props.icon
+            : null
+          }
           { props.spinner ?
             <ActivityIndicator {...props.spinnerProps} style={{ marginRight: 10 }} />
             : null
           }
           <Text style={styles.labelStyle}>{props.text}</Text>
+          { (props.icon && props.iconAlignment === 'right') ?
+            props.icon
+            : null
+          }
         </View>
       </Animated.View>
     </TouchableOpacity>
@@ -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
 };