TouchableItem.js
1.85 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
/* @flow */
/**
* 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';
import type { ViewStyleProp } from '../TypeDefinition';
const ANDROID_VERSION_LOLLIPOP = 21;
type Props = {
onPress?: () => void,
delayPressIn?: number,
borderless?: boolean,
pressColor?: string,
activeOpacity?: number,
children?: React.Node,
style?: ViewStyleProp,
};
export default class TouchableItem extends React.Component<Props> {
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>
);
}
}