UNPKG

1.17 kBTypeScriptView Raw
1import * as React from 'react';
2import { Platform, Pressable, PressableProps } from 'react-native';
3
4export type Props = PressableProps & {
5 pressColor?: string;
6 pressOpacity?: number;
7 children: React.ReactNode;
8};
9
10const ANDROID_VERSION_LOLLIPOP = 21;
11const ANDROID_SUPPORTS_RIPPLE =
12 Platform.OS === 'android' && Platform.Version >= ANDROID_VERSION_LOLLIPOP;
13
14/**
15 * PlatformPressable provides an abstraction on top of TouchableNativeFeedback and
16 * TouchableOpacity to handle platform differences.
17 *
18 * On Android, you can pass the props of TouchableNativeFeedback.
19 * On other platforms, you can pass the props of TouchableOpacity.
20 */
21export default function PlatformPressable({
22 android_ripple,
23 pressColor = 'rgba(0, 0, 0, .32)',
24 pressOpacity,
25 style,
26 ...rest
27}: Props) {
28 return (
29 <Pressable
30 android_ripple={
31 ANDROID_SUPPORTS_RIPPLE
32 ? { color: pressColor, ...android_ripple }
33 : undefined
34 }
35 style={({ pressed }) => [
36 { opacity: pressed && !ANDROID_SUPPORTS_RIPPLE ? pressOpacity : 1 },
37 typeof style === 'function' ? style({ pressed }) : style,
38 ]}
39 {...rest}
40 />
41 );
42}