Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 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 | 1x 11x 11x 11x 1x | import React from "react";
import { Pressable, StyleSheet, ViewStyle } from "react-native";
import { Ionicons } from "@expo/vector-icons";
const BURGUNDY = "#800020";
interface CircleIconButtonProps {
readonly onPress?: () => void;
readonly icon: keyof typeof Ionicons.glyphMap;
/** Icon size (default 20). Circle diameter = size + 14 */
readonly size?: number;
readonly iconColor?: string;
readonly backgroundColor?: string;
readonly style?: ViewStyle;
readonly hitSlop?: number;
}
export default function CircleIconButton({
onPress,
icon,
size = 20,
iconColor = BURGUNDY,
backgroundColor = "rgba(128,0,32,0.10)",
style,
hitSlop = 8,
}: CircleIconButtonProps) {
const diameter = size + 14;
return (
<Pressable
onPress={onPress}
hitSlop={hitSlop}
style={({ pressed }) => [
styles.circle,
{
width: diameter,
height: diameter,
borderRadius: diameter / 2,
backgroundColor,
opacity: pressed ? 0.7 : 1,
},
style,
]}
>
<Ionicons name={icon} size={size} color={iconColor} />
</Pressable>
);
}
const styles = StyleSheet.create({
circle: {
alignItems: "center",
justifyContent: "center",
},
});
|