TouchableItem.js
1.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
* TouchableItem renders a touchable that looks native on both iOS and Android.
*
* It provides an abstraction on top of TouchableNativeFeedback and
* TouchableOpacity.
*
* On iOS you can pass the props of TouchableOpacity, on Android pass the props
* of TouchableNativeFeedback.
*/
import * as React from 'react';
import { Platform, TouchableNativeFeedback, TouchableOpacity, View } from 'react-native';
const ANDROID_VERSION_LOLLIPOP = 21;
export default class TouchableItem extends React.Component {
static defaultProps = {
borderless: false,
pressColor: 'rgba(0, 0, 0, .32)'
};
render() {
/*
* TouchableNativeFeedback.Ripple causes a crash on old Android versions,
* therefore only enable it on Android Lollipop and above.
*
* All touchables on Android should have the ripple effect according to
* platform design guidelines.
* We need to pass the background prop to specify a borderless ripple effect.
*/
if (Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP) {
const { style, ...rest } = this.props;
return <TouchableNativeFeedback {...rest} style={null} background={TouchableNativeFeedback.Ripple(this.props.pressColor || '', this.props.borderless || false)}>
<View style={style}>{React.Children.only(this.props.children)}</View>
</TouchableNativeFeedback>;
}
return <TouchableOpacity {...this.props}>{this.props.children}</TouchableOpacity>;
}
}