Chip

(A) One-liner

Chip is a component for displaying short labels/states, or creating clickable "filter/tag" style actions. Press animation is only applied when onPress exists, and when onClose is provided, a close button is shown on the right to support "deletable chip" pattern.

(B) Installation (Track A / Track B)

Track A (CLI / local install)

1. Add Chip

pnpm dlx @fleet-ui/cli add Chip

2. Import example

import { Chip } from '@fleet-ui/local/components';

Track B (NPM package)

1. Import example

import { Chip } from '@fleet-ui/components';

(Required) Per-component Dependencies

Chip requires these dependencies for close icon and press interaction animation.

# For Expo, npx expo install is recommended
pnpm add lucide-react-native react-native-reanimated react-native-gesture-handler react-native-unistyles

(D) Core Features & Usage

D-1. Most Common Scenario (Minimal Example)

import { Chip } from '@fleet-ui/components';
 
export function Example() {
  return <Chip onPress={() => {}}>Recommended</Chip>;
}

D-2. Closable Chip: onClose

When onClose is provided, close button is displayed on right, and rightIcon is ignored (when not loading).

import { Chip } from '@fleet-ui/components';
 
export function Example() {
  return (
    <Chip onPress={() => {}} onClose={() => console.log('close')}>
      React Native
    </Chip>
  );
}

Close button press uses event.stopPropagation() to block parent press. This is designed so pressing close doesn't trigger onPress.

D-3. Icon-only: iconOnly

iconOnly=true is a pattern for rendering only icon without text. In this case, aria-label or accessibilityLabel is required.

import { Chip } from '@fleet-ui/components';
import { View } from 'react-native';
 
function DemoIcon() {
  return <View style={{ width: 16, height: 16 }} />;
}
 
export function Example() {
  return (
    <Chip iconOnly aria-label="Favorite" onPress={() => {}}>
      <DemoIcon />
    </Chip>
  );
}

(E) Internal State / Shared Value / Animation

E-1. State Model

• isDisabled = Boolean(disabled || loading) (interaction blocked during loading)
• isInteractive = Boolean(onPress) (treated as "non-clickable chip" if no onPress)

Implementation disables Pressable with disabled={isDisabled || !isInteractive}, so if no onPress, the chip is rendered visually but becomes a "non-pressable element."

E-2. Reanimated / Shared Value

Chip processes press animation with internal shared value (only when onPress exists).

• press-in: scale = 0.95, opacity = 0.6 (spring)
• press-out: scale/opacity = 1 return

In disabled (or loading) state, blocks press and additionally lowers opacity.

(F) Accessibility

• Default role: accessibilityRole="button" (when onPress exists)
• Label determination priority:
  • 'aria-label' → accessibilityLabel (PressableProps) → string children
• State passed:
  • accessibilityState: { disabled, busy }

Recommended rules:

• When iconOnly=true, providing aria-label (web) or accessibilityLabel is recommended.
• Close button internally provides accessibilityLabel="Close". For app internationalization, consider wrapping or replacing the component.

(G) Props Table

Reference: ChipProps from packages/components/src/Chip/Chip.types.ts. ChipProps extends PressableProps (however, children and style are redefined).

PressableProps Inheritance (Summary)

ChipProps extends PressableProps, so onPress, onPressIn, onPressOut, disabled, accessibilityLabel, etc. are supported as-is.