Skip to main content
UI components provide common interface patterns and interactions used throughout the app.

​
IconSymbol

A cross-platform icon component that uses native SF Symbols on iOS and Material Icons on Android and web. This ensures optimal resource usage and a consistent look across platforms.

​
Props

​
name
IconSymbolName
required
Icon name based on SF Symbols. Available icons:
  • house.fill - Home icon
  • paperplane.fill - Send icon
  • chevron.left.forwardslash.chevron.right - Code icon
  • chevron.right - Chevron right icon
Note: Icons must be manually mapped to Material Icons for Android/web support.
​
size
number
default:"24"
Size of the icon in pixels.
​
color
string | OpaqueColorValue
required
Color of the icon.
​
style
StyleProp<TextStyle>
Additional styles to apply to the icon.
​
weight
SymbolWeight
Symbol weight (iOS only). Options: 'ultraLight' | 'thin' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold' | 'heavy' | 'black'

​
TypeScript Interface

type IconSymbolName = 
  | 'house.fill'
  | 'paperplane.fill'
  | 'chevron.left.forwardslash.chevron.right'
  | 'chevron.right';

interface IconSymbolProps {
  name: IconSymbolName;
  size?: number;
  color: string | OpaqueColorValue;
  style?: StyleProp<TextStyle>;
  weight?: SymbolWeight;
}

​
Usage Examples

import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';

// Basic icon
<IconSymbol
  name="house.fill"
  size={24}
  color="#000000"
/>

// Themed icon
<IconSymbol
  name="chevron.right"
  size={18}
  weight="medium"
  color={Colors.light.icon}
/>

// Icon with custom style
<IconSymbol
  name="paperplane.fill"
  size={20}
  color="#0a7ea4"
  style={{ transform: [{ rotate: '45deg' }] }}
/>

​
Adding New Icons

To add new icons, update the MAPPING object in components/ui/icon-symbol.tsx: 
const MAPPING = {
  'house.fill': 'home',
  'paperplane.fill': 'send',
  'your.sf.symbol': 'material-icon-name',
} as IconMapping;
Find Material Icons at Icons Directory and SF Symbols in the SF Symbols app.

​
Collapsible

An expandable/collapsible section component with an animated chevron indicator.

​
Props

​
title
string
required
The title text displayed in the collapsible header.
​
children
React.ReactNode
required
The content to show when expanded.

​
Usage Examples

import { Collapsible } from '@/components/ui/collapsible';
import { ThemedText } from '@/components/themed-text';

// Basic collapsible section
<Collapsible title="More Information">
  <ThemedText>This content is hidden by default.</ThemedText>
  <ThemedText>Click the title to expand or collapse.</ThemedText>
</Collapsible>

// Multiple collapsible sections
<>
  <Collapsible title="Section 1">
    <ThemedText>Content for section 1</ThemedText>
  </Collapsible>
  
  <Collapsible title="Section 2">
    <ThemedText>Content for section 2</ThemedText>
  </Collapsible>
  
  <Collapsible title="Section 3">
    <ThemedText>Content for section 3</ThemedText>
  </Collapsible>
</>

​
Features

  • Animated chevron that rotates 90 degrees when expanded
  • Theme-aware icon colors
  • Semi-bold title text
  • Content indentation for visual hierarchy
  • Touch feedback with 0.8 opacity

​
Toast Components

The toast system consists of two components that work together to display temporary notifications.

​
ToastContainer

Internal component that renders the list of active toasts. This component is automatically included when you use the ToastProvider and should not be used directly.

​
Props

​
toasts
Toast[]
required
Array of toast objects to display.
​
removeToast
(id: string) => void
required
Callback function to remove a toast by ID.

​
Toast Types

export type ToastType = "success" | "error" | "info" | "warning";

export interface Toast {
  id: string;
  message: string;
  type: ToastType;
}

​
Toast Styling

Each toast type has a distinct background color:
  • Success: Green (#16a34a)
  • Error: Red (#dc2626)
  • Warning: Yellow/Gold (#ca8a04)
  • Info: Blue (#2563eb)

​
Toast Behavior

  • Toasts animate in from the top with a slide and fade effect
  • Automatically dismiss after 3.5 seconds
  • Can be manually dismissed by tapping the toast
  • Multiple toasts stack vertically
  • Positioned at the top of the screen (60px from top)
  • High z-index (9999) to appear above other content

​
Usage

To display toasts, use the useToast hook from the ToastContext. See Context for details.

Build docs developers (and LLMs) love

Get started for freeTalk to us