Skip to content

Feature: Button with TouchableOpacity for Android #81

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Feature: Button with TouchableOpacity for Android #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
dc40cb7
add touchFeedBackType to prop types
karthik-durai Oct 12, 2019
085ac0b
define list of values for touchFeedBackType
karthik-durai Oct 12, 2019
44fcd27
add logic to set default value - touchFeedBackType
karthik-durai Oct 12, 2019
4ff4660
add logic to render appropriate feedback element
karthik-durai Oct 12, 2019
36718c7
add doc about touchFeedBackType prop
karthik-durai Oct 12, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion Button.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,11 @@ class Button extends Component {
onPressIn: PropTypes.func,
onPressOut: PropTypes.func,
background: (TouchableNativeFeedback.propTypes) ? TouchableNativeFeedback.propTypes.background : PropTypes.any,
touchFeedBackType: PropTypes.oneOf(['nativeFeedback', 'opacity'])
}

static touchFeedBackTypes = ['nativeFeedback', 'opacity']

static isAndroid = (Platform.OS === 'android')

_renderChildren() {
Expand Down Expand Up @@ -83,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 (
<View style={[styles.button, this.props.style, (this.props.disabledStyle || styles.opacity)]}>
Expand All @@ -103,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()
});
Expand Down
1 change: 1 addition & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ``<Text>`` 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``. |
Expand Down