Merge pull request #16 from APSL/iss_13

fixes #13 Added support for TouchableNativeFeedback
APSL · Jan 13, 2016 · 67e82f1 · 67e82f1
2 parents fdd7fc7 + a6b6ea5
commit 67e82f1
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 16 deletions.
diff --git a/Button.js b/Button.js
@@ -9,19 +9,23 @@ var {
   PropTypes,
   ActivityIndicatorIOS,
   ProgressBarAndroid,
+  TouchableNativeFeedback,
   Platform
 } = React;
 var StyleSheetPropType = require('react-native/Libraries/StyleSheet/StyleSheetPropType');
 var TextStylePropTypes = require('react-native/Libraries/Text/TextStylePropTypes');
 
 var Button = React.createClass({
   propTypes: Object.assign({},
-    TouchableOpacity.propTypes,
     {textStyle: StyleSheetPropType(TextStylePropTypes),
     children: PropTypes.string.isRequired,
     isLoading: PropTypes.bool,
     isDisabled: PropTypes.bool,
-    activityIndicatorColor: PropTypes.string},
+    activityIndicatorColor: PropTypes.string,
+    onPress: PropTypes.func,
+    onLongPress: PropTypes.func,
+    onPressIn: PropTypes.func,
+    onPressOut: PropTypes.func},
   ),
 
   _renderInnerText: function () {
@@ -42,6 +46,7 @@ var Button = React.createClass({
               height: 20,
             }, styles.spinner]}
             styleAttr='Inverse'
+            color={this.props.activityIndicatorColor || 'black'}
           />
         );
       }
@@ -54,27 +59,37 @@ var Button = React.createClass({
   },
 
   render: function () {
-    // Extract TouchableOpacity props
+    // Extract Touchable props
     var touchableProps = {
       onPress: this.props.onPress,
       onPressIn: this.props.onPressIn,
       onPressOut: this.props.onPressOut,
       onLongPress: this.props.onLongPress
     };
-
     if (this.props.isDisabled === true || this.props.isLoading === true) {
       return (
         <View style={[styles.button, this.props.style, styles.opacity]}>
           {this._renderInnerText()}
         </View>
       );
     } else {
-      return (
-        <TouchableOpacity {...touchableProps}
-          style={[styles.button, this.props.style]}>
-          {this._renderInnerText()}
-        </TouchableOpacity>
-      );
+      if (Platform.OS !== 'android') {
+        return (
+          <TouchableOpacity {...touchableProps}
+            style={[styles.button, this.props.style]}>
+            {this._renderInnerText()}
+          </TouchableOpacity>
+        );
+      } else {
+        return (
+          <TouchableNativeFeedback {...touchableProps}
+            background={TouchableNativeFeedback.Ripple()}>
+            <Text style={[styles.button, this.props.style]}>
+              {this._renderInnerText()}
+            </Text>
+          </TouchableNativeFeedback>
+        );
+      }
     }
   }
 });

diff --git a/README.md b/README.md
@@ -6,6 +6,8 @@ A React Native button component customizable via ``style`` props.
 <img src="https://raw.githubusercontent.com/wiki/APSL/react-native-button/button.png" alt="Button component screenshot" width="400">
 </p>
 
+Renders a ``TouchableOpacity`` under iOS and a ``TouchableNativeFeedback`` under Android.
+
 ## Install
 
 Install the package:
@@ -22,7 +24,7 @@ import Button from 'apsl-react-native-button'
 
 ## Usage
 
-Provide ``TouchableOpacity``' props to the component (including ``style``),
+Provide ``TouchableWithoutFeedback``' 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.
@@ -45,7 +47,7 @@ and disable it to prevent accidental taps.
 | ``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. |
+| ``activityIndicatorColor`` | ``string`` | Sets the button of the ``ActivityIndicatorIOS`` or ``ProgressBarAndroid`` in the loading state. |
 
 Check the included example for more options.
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "apsl-react-native-button",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "React Native button component with rounded corners.",
   "main": "Button.js",
   "scripts": {
@@ -24,7 +24,4 @@
     "url": "https://github.com/APSL/react-native-button/issues"
   },
   "homepage": "https://github.com/APSL/react-native-button#readme",
-  "peerDependencies": {
-    "react-native": ">=0.11.0"
-  }
 }