diff --git a/src/components/TouchableRipple.js b/src/components/TouchableRipple.js new file mode 100644 index 0000000..5182282 --- /dev/null +++ b/src/components/TouchableRipple.js @@ -0,0 +1,95 @@ +/* @flow */ + +import React, { Children, PureComponent } from 'react'; +import PropTypes from 'prop-types'; +import { + TouchableNativeFeedback, + TouchableHighlight, + Platform, + View, +} from 'react-native'; +import color from 'color'; + +const ANDROID_VERSION_LOLLIPOP = 21; + +type Props = { + borderless: boolean, + background?: Object, + onPress?: ?Function, + rippleColor: string, + underlayColor?: string, + children?: any, + style?: any, +}; + +type DefaultProps = { + borderless: boolean, + rippleColor: string, +}; + +export default class TouchableItem extends PureComponent< + DefaultProps, + Props, + void +> { + static propTypes = { + borderless: PropTypes.bool, + background: PropTypes.object, + onPress: PropTypes.func, + rippleColor: PropTypes.string, + underlayColor: PropTypes.string, + children: PropTypes.element.isRequired, + style: View.propTypes.style, + }; + + static defaultProps = { + borderless: false, + rippleColor: 'rgba(0, 0, 0, .32)', + }; + + render() { + const { + style, + background, + borderless, + rippleColor, + underlayColor, + children, + ...rest + } = this.props; + + if ( + Platform.OS === 'android' && + Platform.Version >= ANDROID_VERSION_LOLLIPOP + ) { + return ( + + + {Children.only(children)} + + + ); + } + + return ( + + {Children.only(children)} + + ); + } +} diff --git a/src/components/TouchableRipple/TouchableRipple.android.js b/src/components/TouchableRipple/TouchableRipple.android.js deleted file mode 100644 index 2069aac..0000000 --- a/src/components/TouchableRipple/TouchableRipple.android.js +++ /dev/null @@ -1,74 +0,0 @@ -/* @flow */ - -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { TouchableNativeFeedback, View, Platform } from 'react-native'; - -type Props = { - borderless: boolean, - delayPressIn?: number, - onPress?: ?Function, - onPressIn?: ?Function, - onPressOut?: ?Function, - rippleColor: string, - children?: any, - style?: any, -}; - -type DefaultProps = { - borderless: boolean, - rippleColor: string, -}; - -export default class TouchableRipple extends PureComponent< - DefaultProps, - Props, - void -> { - static propTypes = { - children: PropTypes.element.isRequired, - borderless: PropTypes.bool, - delayPressIn: PropTypes.number, - onPress: PropTypes.func, - onPressIn: PropTypes.func, - onPressOut: PropTypes.func, - rippleColor: PropTypes.string, - style: View.propTypes.style, - }; - - static defaultProps = { - borderless: false, - rippleColor: 'rgba(0, 0, 0, .32)', - }; - - render() { - const { - children, - delayPressIn, - onPress, - onPressIn, - onPressOut, - rippleColor, - borderless, - style, - } = this.props; - - return ( - = 21 - ? TouchableNativeFeedback.Ripple(rippleColor, borderless) - : TouchableNativeFeedback.SelectableBackground() - } - > - - {children} - - - ); - } -} diff --git a/src/components/TouchableRipple/TouchableRipple.js b/src/components/TouchableRipple/TouchableRipple.js deleted file mode 100644 index 9857b9b..0000000 --- a/src/components/TouchableRipple/TouchableRipple.js +++ /dev/null @@ -1,69 +0,0 @@ -/* @flow */ - -import React, { PureComponent } from 'react'; -import PropTypes from 'prop-types'; -import { TouchableHighlight, View } from 'react-native'; -import color from 'color'; - -type Props = { - borderless: boolean, - delayPressIn?: number, - onPress?: ?Function, - onPressIn?: ?Function, - onPressOut?: ?Function, - rippleColor: string, - children?: any, - style?: any, -}; - -type DefaultProps = { - borderless: boolean, - rippleColor: string, -}; - -export default class TouchableRipple extends PureComponent< - DefaultProps, - Props, - void -> { - static propTypes = { - borderless: PropTypes.bool, - delayPressIn: PropTypes.number, - onPress: PropTypes.func, - onPressIn: PropTypes.func, - onPressOut: PropTypes.func, - rippleColor: PropTypes.string, - children: PropTypes.element.isRequired, - style: View.propTypes.style, - }; - - static defaultProps = { - borderless: false, - rippleColor: 'rgba(0, 0, 0, .32)', - }; - - render() { - const { - children, - delayPressIn, - onPress, - onPressIn, - onPressOut, - rippleColor, - style, - } = this.props; - - return ( - - {children} - - ); - } -} diff --git a/src/components/TouchableRipple/index.js b/src/components/TouchableRipple/index.js deleted file mode 100644 index 7552d7d..0000000 --- a/src/components/TouchableRipple/index.js +++ /dev/null @@ -1,3 +0,0 @@ -/* @flow */ - -export { default } from './TouchableRipple';