Component Library

RNCopilot ships with 30 production-ready UI components organized into 8 categories. Every component is fully typed, themed with react-native-unistyles 3.x semantic tokens, and supports both light and dark modes out of the box.

All components are exported from a single barrel file. Import what you need from @/common/components:


import { Button, Text, Card, Input } from '@/common/components';
import type { ButtonProps, TextVariant } from '@/common/components';

Categories

Action — 2 components

Interactive elements that trigger actions.

Component	Description
Button	Primary action element with 4 variants, 3 sizes, loading state, and icon support
IconButton	Compact icon-only button with the same variant and size system

Data Display — 6 components

Components for presenting content and information.

Component	Description
Text	Typography system with 8 variants, weight control, and semantic colors
Avatar	User representation with image, initials, and icon fallbacks
Badge	Status indicators with solid, outline, and dot variants
Card	Content container with filled, elevated, and outlined styles
Chip	Compact selectable/dismissible tags
ListItem	Structured row with title, subtitle, and slot content

Disclosure — 1 component

Component	Description
Accordion	Expandable sections with single or multiple expand modes

Feedback — 6 components

Components that communicate status, progress, and errors.

Component	Description
Loading	Activity indicator with optional message and fullscreen mode
ProgressBar	Determinate and indeterminate progress with 5 color schemes
Skeleton	Placeholder loading states with text, circle, and rect shapes
Snackbar	Auto-dismissing notification with action support
EmptyState	Placeholder for empty lists or screens with optional action
ErrorBoundary	Crash recovery boundary with retry functionality

Form — 9 components

Input controls and form utilities.

Component	Description
Input	Text field with label, error, helper text, and icon slots
TextArea	Multi-line input with character count
Select	Bottom sheet dropdown picker
Checkbox	Toggle with label and indeterminate state
Switch	On/off toggle with label
RadioGroup	Single-select option group, vertical or horizontal
SegmentedControl	Animated tab-style selector with icon support
SearchBar	Search input with clear button and loading state
FormField	react-hook-form Controller wrapper for any input

Layout — 2 components

Structural components for page composition.

Component	Description
ScreenContainer	Safe area wrapper with optional scroll and padding
Divider	Horizontal or vertical separator line

Overlay — 2 components

Components that render above other content.

Component	Description
Dialog	Modal dialog with title, message, and action buttons
Menu	Dropdown menu with icons and destructive item support

Typography — 2 components

Text rendering and iconography.

Component	Description
Icon	Ionicons wrapper with 6 semantic color variants
Text	Full typography system (also listed under Data Display)

File Structure Pattern

Every component follows a consistent directory structure:


ComponentName/
├── ComponentName.tsx          # Component implementation
├── ComponentName.styles.ts    # Unistyles stylesheet (optional)
├── ComponentName.types.ts     # TypeScript interfaces (optional)
└── index.ts                   # Barrel export

Styles use the unistyles variants API:


import { StyleSheet } from 'react-native-unistyles';
 
export const styles = StyleSheet.create((theme) => ({
  container: {
    backgroundColor: theme.colors.surface.primary,
    borderRadius: theme.radius.md,
    variants: {
      size: {
        sm: { padding: theme.spacing.sm },
        md: { padding: theme.spacing.md },
        lg: { padding: theme.spacing.lg },
      },
    },
  },
}));

Interactive components use press animations via the useAnimatedPress hook for tactile feedback on touch.

Shared Types

Several types are shared across the library:


/** Semantic color scheme used across components. */
type ColorScheme = 'primary' | 'success' | 'error' | 'warning' | 'info';
 
/** Standard component size scale. */
type ComponentSize = 'sm' | 'md' | 'lg';