import React, { PropsWithChildren, useCallback } from "react"; import { GestureResponderEvent, Pressable, PressableProps, Text, TextStyle, } from "react-native"; import { cssInterop } from "react-native-css-interop"; import Animated from "react-native-reanimated"; import Svg, { Path } from "react-native-svg"; import { useHaptic } from "@/hooks/useHaptic"; import { useScaleAnimation } from "@/hooks/useScaleAnimation"; import Icon from "@/components/ui/icon"; import { cx, IconProps, passProps, RenderPropType } from "@/lib/utils"; export type TagSize = "sm" | "md" | "lg"; export type TagVariant = "solid" | "subtle" | "outline" | "ghost"; export type TagTheme = "default"; const AnimatedPressable = Animated.createAnimatedComponent(Pressable); export const Close: React.FC = ({ fill = "#525252" }) => { return ( ); }; cssInterop(Close, { className: { target: true, nativeStyleToProp: { fill: true }, }, }); export interface TagProps extends PressableProps { /** * The size of the Tag component. * @default md */ size: TagSize; /** * The variant of the Tag component. * @default solid */ variant: TagVariant; /** * The Theme of the Tag component. * @default base */ themeColor: TagTheme; /** * A Prefix Element. * If added, the Tag will show a prefix Element before the Tag's text. */ prefix: RenderPropType; /** * A Suffix Element. * If added, the Tag will show a suffix Element after the Tag's text. */ suffix: RenderPropType; /** * Is Tag Closable/Removable. * If yes, the Tag will show a Close Icon after the Tag's text or Suffix. */ closable: boolean; /** * The Text style of the Tag component. * @default {} */ textStyle: TextStyle; /** * When a view is marked as accessible, * it is a good practice to set an accessibilityLabel on the view, * so that people who use VoiceOver know what element they have selected. * VoiceOver will read this string when a user selects the associated element. */ accessibilityLabel: string; /** * When set to true, The Tap creates a Touch Feedback * Check more -> https://docs.expo.dev/versions/latest/sdk/haptics/ * @default true */ hapticEnabled: boolean; /** * The className of the Tag component. */ className: string; } export const Tag = (tagProps: PropsWithChildren>) => { const { handlers, animatedStyle } = useScaleAnimation(); const hapticSelection = useHaptic(); const { size = "md", variant = "solid", themeColor = "default", closable = false, prefix, suffix: suffixFromProps, style, textStyle, accessibilityLabel, hapticEnabled = true, onPress, children, disabled, className, ...otherProps } = tagProps; const handlePress = useCallback((event: GestureResponderEvent) => { onPress && onPress(event); hapticEnabled && hapticSelection?.(); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); /* Prefix Slot */ const _prefix = prefix ? ( ) : null; const suffix = suffixFromProps ? ( suffixFromProps ) : closable ? ( } /> ) : null; /* Suffix Slot */ const _suffix = suffix ? ( ) : null; /** * Tag Children */ const tagChildren = typeof children === "string" ? ( {children as React.ReactNode} ) : ( children ); return ( <> {_prefix} {tagChildren} {_suffix} ); }; export const tagTheme = { base: "flex flex-row items-center justify-center gap-2", theme: { default: { variant: { solid: { container: { wrapper: "bg-surface-gray-7 active:bg-surface-gray-6", disabled: "bg-surface-gray-2", }, iconFill: { default: "fill-ink-white", disabled: "fill-ink-gray-4", }, text: { default: "text-ink-white", disabled: "text-ink-gray-4", }, }, subtle: { container: { wrapper: "bg-surface-gray-2 active:bg-surface-gray-3", disabled: "bg-surface-gray-2", }, iconFill: { default: "fill-ink-gray-7", disabled: "fill-ink-gray-4", }, text: { default: "text-ink-gray-7", disabled: "text-ink-gray-4", }, }, outline: { container: { wrapper: "border border-outline-gray-2 active:border-outline-gray-3", disabled: "border bg-surface-gray-2 border-outline-gray-2", }, iconFill: { default: "fill-ink-gray-7", disabled: "fill-ink-gray-4", }, text: { default: "text-ink-gray-7", disabled: "text-ink-gray-4", }, }, ghost: { container: { wrapper: "bg-transparent active:bg-surface-gray-3", disabled: "bg-transparent", }, iconFill: { default: "fill-ink-gray-7", disabled: "fill-ink-gray-4", }, text: { default: "text-ink-gray-7", disabled: "text-ink-gray-4", }, }, }, }, }, size: { sm: { default: "min-h-5 w-auto min-w-5 px-1.5 rounded-[5px]", iconSize: 12, closable: "w-3 ml-1", text: "text-[12px] font-medium", }, md: { default: "min-h-6 w-auto min-w-6 px-1.5 rounded-md", iconSize: 12, closable: "w-3 ml-1", text: "text-[13px] font-medium", }, lg: { default: "min-h-7 w-auto min-w-7 px-2 rounded-lg", iconSize: 12, closable: "w-3 ml-1", text: "text-sm font-medium", }, }, }; export default Tag;

Tag

Features

Installation