diff --git a/src/views/BorderlessButton.js b/src/views/BorderlessButton.js new file mode 100644 index 0000000..bd1578d --- /dev/null +++ b/src/views/BorderlessButton.js @@ -0,0 +1,53 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Animated, Platform } from 'react-native'; +import { BaseButton } from 'react-native-gesture-handler'; + +const AnimatedBaseButton = Animated.createAnimatedComponent(BaseButton); + +export default class BorderlessButton extends React.Component { + static propTypes = { + ...BaseButton.propTypes, + borderless: PropTypes.bool, + }; + + static defaultProps = { + activeOpacity: 0.3, + borderless: true, + }; + + constructor(props) { + super(props); + this._opacity = new Animated.Value(1); + } + + _onActiveStateChange = active => { + if (Platform.OS !== 'android') { + Animated.spring(this._opacity, { + stiffness: 1000, + damping: 500, + mass: 3, + overshootClamping: true, + restDisplacementThreshold: 0.01, + restSpeedThreshold: 0.01, + toValue: active ? this.props.activeOpacity : 1, + }).start(); + } + + this.props.onActiveStateChange && this.props.onActiveStateChange(active); + }; + + render() { + const { children, style, ...rest } = this.props; + + return ( + + {children} + + ); + } +} diff --git a/src/views/TouchableItem.js b/src/views/TouchableItem.js index c7a19b7..eca8f51 100644 --- a/src/views/TouchableItem.js +++ b/src/views/TouchableItem.js @@ -15,6 +15,8 @@ import { View, } from 'react-native'; +import BorderlessButton from './BorderlessButton'; + const ANDROID_VERSION_LOLLIPOP = 21; export default class TouchableItem extends React.Component { @@ -46,13 +48,27 @@ export default class TouchableItem extends React.Component { this.props.borderless )} > - {React.Children.only(this.props.children)} + + {React.Children.only(this.props.children)} + ); + } else if (Platform.OS === 'ios') { + return ( + + {this.props.children} + + ); + } else { + return ( + + {this.props.children} + + ); } - - return ( - {this.props.children} - ); } }