v3.0.2

Author: alvaromb

Button.js

@@ -1,21 +1,16 @@
 'use strict';
 
-const React = require('react');
-const {
-  PropTypes
-} = React;
-
-const {
+import React, { PropTypes } from 'react';
+import {
   View,
   TouchableOpacity,
   Text,
   StyleSheet,
   ActivityIndicator,
   TouchableNativeFeedback,
   Platform
-} = require('react-native');
-
-const isEqual = require('lodash.isequal');
+} from 'react-native';
+import isEqual from 'lodash.isequal';
 
 const Button = React.createClass({
   propTypes: {
@@ -26,8 +21,8 @@ const Button = React.createClass({
       PropTypes.node,
       PropTypes.element
     ]),
-    activeOpacity: PropTypes.number,
     accessibilityLabel: PropTypes.string,
+    activeOpacity: PropTypes.number,
     allowFontScaling: PropTypes.bool,
     isLoading: PropTypes.bool,
     isDisabled: PropTypes.bool,
@@ -94,38 +89,37 @@ const Button = React.createClass({
           {this._renderInnerText()}
         </View>
       );
-    } else {
-      // Extract Touchable props
-      let touchableProps = {
-        accessibilityLabel: this.props.accessibilityLabel,
-        onPress: this.props.onPress,
-        onPressIn: this.props.onPressIn,
-        onPressOut: this.props.onPressOut,
-        onLongPress: this.props.onLongPress,
-        activeOpacity: this.props.activeOpacity,
-        delayLongPress: this.props.delayLongPress,
-        delayPressIn: this.props.delayPressIn,
-        delayPressOut: this.props.delayPressOut,
-      };
-      if (Button.isAndroid) {
-        touchableProps = Object.assign(touchableProps, {
-          background: this.props.background || TouchableNativeFeedback.SelectableBackground()
-        });
-        return (
-          <TouchableNativeFeedback {...touchableProps}>
-            <Text style={[styles.button, this.props.style]}>
-              {this._renderInnerText()}
-            </Text>
-          </TouchableNativeFeedback>
-        )
-      } else {
-        return (
-          <TouchableOpacity {...touchableProps}
-            style={[styles.button, this.props.style]}>
+    }
+    // Extract Touchable props
+    let touchableProps = {
+      accessibilityLabel: this.props.accessibilityLabel,
+      onPress: this.props.onPress,
+      onPressIn: this.props.onPressIn,
+      onPressOut: this.props.onPressOut,
+      onLongPress: this.props.onLongPress,
+      activeOpacity: this.props.activeOpacity,
+      delayLongPress: this.props.delayLongPress,
+      delayPressIn: this.props.delayPressIn,
+      delayPressOut: this.props.delayPressOut,
+    };
+    if (Button.isAndroid) {
+      touchableProps = Object.assign(touchableProps, {
+        background: this.props.background || TouchableNativeFeedback.SelectableBackground()
+      });
+      return (
+        <TouchableNativeFeedback {...touchableProps}>
+          <View style={[styles.button, this.props.style]}>
             {this._renderInnerText()}
-          </TouchableOpacity>
-        );
-      }
+          </View>
+        </TouchableNativeFeedback>
+      )
+    } else {
+      return (
+        <TouchableOpacity {...touchableProps}
+          style={[styles.button, this.props.style]}>
+          {this._renderInnerText()}
+        </TouchableOpacity>
+      );
     }
   }
 });
@@ -134,15 +128,18 @@ const styles = StyleSheet.create({
   button: {
     height: 44,
     flexDirection: 'row',
+    alignItems: 'center',
     borderWidth: 1,
     borderRadius: 8,
     marginBottom: 10,
     alignSelf: 'stretch',
     justifyContent: 'center',
   },
   textButton: {
+    flex: 1,
     fontSize: 18,
-    alignSelf: 'center',
+    textAlign: 'center',
+    backgroundColor: 'transparent',
   },
   spinner: {
     alignSelf: 'center',

Example/button/Example.js

@@ -86,7 +86,8 @@ class Example extends React.Component {
           }}>
           Hello
         </Button>
-        <Button disabledStyle={styles.buttonStyle8}
+        <Button
+          disabledStyle={styles.buttonStyle8}
           isDisabled={true}
           textStyle={styles.textStyle8}>
           Disabled
@@ -166,6 +167,7 @@ const styles = StyleSheet.create({
     borderRadius: 22,
   },
   textStyle8: {
+    width: 200,
     fontFamily: 'Avenir Next',
     fontWeight: '500',
     color: '#333',

Example/button/package.json

@@ -6,8 +6,8 @@
     "start": "node_modules/react-native/packager/packager.sh"
   },
   "dependencies": {
-    "apsl-react-native-button": "3.0.0",
-    "react": "^15.2.1",
-    "react-native": "0.29.1"
+    "apsl-react-native-button": "3.0.1",
+    "react": "^15.3.1",
+    "react-native": "0.37.0"
   }
 }

__tests__/__snapshots__/Button.test.js.snap

@@ -14,6 +14,7 @@ exports[`Button Renders 1`] = `
   onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
   style={
     Object {
+      "alignItems": "center",
       "alignSelf": "stretch",
       "borderRadius": 8,
       "borderWidth": 1,
@@ -32,8 +33,10 @@ exports[`Button Renders 1`] = `
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "fontSize": 18
+          "backgroundColor": "transparent",
+          "flex": 1,
+          "fontSize": 18,
+          "textAlign": "center"
         },
         undefined
       ]
@@ -48,6 +51,7 @@ exports[`Button Renders disabled 1`] = `
   style={
     Array [
       Object {
+        "alignItems": "center",
         "alignSelf": "stretch",
         "borderRadius": 8,
         "borderWidth": 1,
@@ -69,8 +73,10 @@ exports[`Button Renders disabled 1`] = `
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "fontSize": 18
+          "backgroundColor": "transparent",
+          "flex": 1,
+          "fontSize": 18,
+          "textAlign": "center"
         },
         undefined
       ]
@@ -85,6 +91,7 @@ exports[`Button Renders loading 1`] = `
   style={
     Array [
       Object {
+        "alignItems": "center",
         "alignSelf": "stretch",
         "borderRadius": 8,
         "borderWidth": 1,
@@ -128,6 +135,7 @@ exports[`Button Renders with a inner View 1`] = `
   onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
   style={
     Object {
+      "alignItems": "center",
       "alignSelf": "stretch",
       "borderRadius": 8,
       "borderWidth": 1,
@@ -159,6 +167,7 @@ exports[`Button Should contain children 1`] = `
   onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
   style={
     Object {
+      "alignItems": "center",
       "alignSelf": "stretch",
       "borderRadius": 8,
       "borderWidth": 1,
@@ -177,8 +186,10 @@ exports[`Button Should contain children 1`] = `
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "fontSize": 18
+          "backgroundColor": "transparent",
+          "flex": 1,
+          "fontSize": 18,
+          "textAlign": "center"
         },
         undefined
       ]
@@ -204,6 +215,7 @@ exports[`Button Should react to the onPress event 1`] = `
   onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
   style={
     Object {
+      "alignItems": "center",
       "alignSelf": "stretch",
       "borderRadius": 8,
       "borderWidth": 1,
@@ -222,8 +234,10 @@ exports[`Button Should react to the onPress event 1`] = `
     style={
       Array [
         Object {
-          "alignSelf": "center",
-          "fontSize": 18
+          "backgroundColor": "transparent",
+          "flex": 1,
+          "fontSize": 18,
+          "textAlign": "center"
         },
         undefined
       ]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "apsl-react-native-button",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "React Native button component with rounded corners.",
   "main": "Button.js",
   "scripts": {