From dc40cb7badafba0bbf6f56f5672e6236341080ac Mon Sep 17 00:00:00 2001 From: Karthik Siddarth Date: Sat, 12 Oct 2019 18:11:07 +0530 Subject: [PATCH 1/5] add touchFeedBackType to prop types --- Button.js | 1 + 1 file changed, 1 insertion(+) diff --git a/Button.js b/Button.js index 3cdb551..46a5e77 100644 --- a/Button.js +++ b/Button.js @@ -37,6 +37,7 @@ class Button extends Component { onPressIn: PropTypes.func, onPressOut: PropTypes.func, background: (TouchableNativeFeedback.propTypes) ? TouchableNativeFeedback.propTypes.background : PropTypes.any, + touchFeedBackType: PropTypes.oneOf(['nativeFeedback', 'opacity']) } static isAndroid = (Platform.OS === 'android') From 085ac0b5f4fe101278644ddfb5e8470e21d23a2a Mon Sep 17 00:00:00 2001 From: Karthik Siddarth Date: Sat, 12 Oct 2019 18:11:32 +0530 Subject: [PATCH 2/5] define list of values for touchFeedBackType --- Button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Button.js b/Button.js index 46a5e77..39870ae 100644 --- a/Button.js +++ b/Button.js @@ -40,6 +40,8 @@ class Button extends Component { touchFeedBackType: PropTypes.oneOf(['nativeFeedback', 'opacity']) } + static touchFeedBackTypes = ['nativeFeedback', 'opacity'] + static isAndroid = (Platform.OS === 'android') _renderChildren() { From 44fcd27faa6c7460e86a1bb4a4f75f7c2cd79a91 Mon Sep 17 00:00:00 2001 From: Karthik Siddarth Date: Sat, 12 Oct 2019 18:13:26 +0530 Subject: [PATCH 3/5] add logic to set default value - touchFeedBackType this is to handle undefined or unexoected values --- Button.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Button.js b/Button.js index 39870ae..c5b6c10 100644 --- a/Button.js +++ b/Button.js @@ -86,6 +86,8 @@ class Button extends Component { } render() { + let { touchFeedBackType } = this.props + touchFeedBackType = Button.touchFeedBackTypes.includes(touchFeedBackType) ? touchFeedBackType : 'nativeFeedback' if (this.props.isDisabled === true || this.props.isLoading === true) { return ( From 4ff4660cf67e828965b9da660e4ad70d45a7fee6 Mon Sep 17 00:00:00 2001 From: Karthik Siddarth Date: Sat, 12 Oct 2019 18:15:46 +0530 Subject: [PATCH 4/5] add logic to render appropriate feedback element --- Button.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Button.js b/Button.js index c5b6c10..3622e77 100644 --- a/Button.js +++ b/Button.js @@ -108,7 +108,7 @@ class Button extends Component { delayPressIn: this.props.delayPressIn, delayPressOut: this.props.delayPressOut, }; - if (Button.isAndroid) { + if (Button.isAndroid && touchFeedBackType === 'nativeFeedback') { touchableProps = Object.assign(touchableProps, { background: this.props.background || TouchableNativeFeedback.SelectableBackground() }); From 36718c746824552a7cd116cd42f382ceb0441d49 Mon Sep 17 00:00:00 2001 From: Karthik Siddarth Date: Sat, 12 Oct 2019 18:30:27 +0530 Subject: [PATCH 5/5] add doc about touchFeedBackType prop --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 0eb33e1..05a2723 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,7 @@ your own styles to your child elements as you see fit. Multiple children are all | ``children`` | ``string``, ``number``, ``React.Element``,or ``array`` | The child nodes to render inside the button. If child is ``string`` or ``number``, it will be rendered inside of a ```` element with ``textStyle`` applied if present. Multiple children are allowed (``array``).| | ``isLoading`` | ``bool`` | Renders an inactive state dimmed button with a spinner if ``true``. | | ``isDisabled`` | ``bool`` | Renders an inactive state dimmed button if ``true``. | +| ``touchFeedBackType`` | ``string`` | Accepted values ``nativeFeedback``, ``opacity``. Default value ``nativeFeedback``, if value is ``nativeFeedback`` then button is rendered using ``TouchableNativeFeedBack`` else if value is ``opacity`` then button is rendered using ``TouchableOpacity`` (**Only for Android**) | | ``activeOpacity`` | ``Number`` | The button onpressing transparency (Usually with a point value between 0 and 1). | | ``activityIndicatorColor`` | ``string`` | Sets the button of the ``ActivityIndicatorIOS`` or ``ProgressBarAndroid`` in the loading state. | | ``background`` | ``TouchableNativeFeedback.propTypes.background`` | **Android only**. The background prop of ``TouchableNativeFeedback``. |