### Install Dependencies with npm

Source: https://github.com/nivlekrod/amparo/blob/main/README.md

Installs all necessary project dependencies using npm. Ensure Node.js and npm are installed on your system.

```bash
npm install
```

--------------------------------

### Start Expo Development Server

Source: https://github.com/nivlekrod/amparo/blob/main/README.md

Starts the Expo development server, allowing you to run your app on simulators, emulators, or Expo Go. This command is crucial for the development workflow.

```bash
npx expo start
```

--------------------------------

### Reset Expo Project to Blank State

Source: https://github.com/nivlekrod/amparo/blob/main/README.md

Resets the project by moving existing starter code to 'app-example' and creating a new, blank 'app' directory for development. Use this when starting fresh.

```bash
npm run reset-project
```

--------------------------------

### Expo Router Navigation Examples

Source: https://context7.com/nivlekrod/amparo/llms.txt

This snippet demonstrates various navigation patterns using Expo Router, including declarative navigation with the Link component for simple page transitions and deep linking, as well as programmatic navigation using the router object for actions like push, back, and replace. It also includes an example of using Link with a context menu on iOS.

```tsx
import { Link, router, useRouter } from 'expo-router';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';
import { Button } from 'react-native';

export default function NavigationExamples() {
  const router = useRouter();

  return (
    <ThemedView style={{ padding: 20, gap: 16 }}>
      {/* Declarative navigation with Link component */}
      <Link href="/">
        <ThemedText type="link">Go to Home</ThemedText>
      </Link>

      <Link href="/modal">
        <ThemedText type="link">Open Modal</ThemedText>
      </Link>

      <Link href="/profile/123">
        <ThemedText type="link">View Profile #123</ThemedText>
      </Link>

      {/* Programmatic navigation */}
      <Button
        title="Navigate to Explore"
        onPress={() => router.push('/explore')}
      />

      <Button
        title="Go Back"
        onPress={() => router.back()}
      />

      <Button
        title="Replace with Settings"
        onPress={() => router.replace('/settings')}
      />

      {/* iOS Context Menu with Link */}
      <Link href="/details">
        <Link.Trigger>
          <ThemedText type="subtitle">Long press for menu</ThemedText>
        </Link.Trigger>
        <Link.Preview />
        <Link.Menu>
          <Link.MenuAction
            title="Edit"
            icon="pencil"
            onPress={() => console.log('Edit')}
          />
          <Link.MenuAction
            title="Share"
            icon="square.and.arrow.up"
            onPress={() => console.log('Share')}
          />
          <Link.MenuAction
            title="Delete"
            icon="trash"
            destructive
            onPress={() => console.log('Delete')}
          />
        </Link.Menu>
      </Link>

      {/* Dismiss modal and navigate */}
      <Link href="/" dismissTo>
        <ThemedText type="link">Close and return home</ThemedText>
      </Link>
    </ThemedView>
  );
}
```

--------------------------------

### Define Theme Color Palette and Font Families

Source: https://context7.com/nivlekrod/amparo/llms.txt

This example demonstrates the usage of a global theme color palette and font families defined in 'constants/theme.ts'. It shows how to apply theme-aware colors and platform-specific fonts to UI components like cards and text. It relies on 'react-native' and a custom 'useColorScheme' hook.

```tsx
// constants/theme.ts - Usage example
import { Colors, Fonts } from '@/constants/theme';
import { View, Text, StyleSheet } from 'react-native';
import { useColorScheme } from '@/hooks/use-color-scheme';

export default function ThemedCard() {
  const colorScheme = useColorScheme() ?? 'light';
  const colors = Colors[colorScheme];

  return (
    <View style={[styles.card, { backgroundColor: colors.background }]}>
      <Text style={[styles.title, {
        color: colors.text,
        fontFamily: Fonts.sans
      }]}>
        Card Title
      </Text>

      <Text style={[styles.body, {
        color: colors.text,
        fontFamily: Fonts.serif
      }]}>
        Body text with serif font
      </Text>

      <View style={[styles.badge, { backgroundColor: colors.tint }]}>
        <Text style={{ color: '#fff', fontFamily: Fonts.rounded }}>
          New
        </Text>
      </View>

      <Text style={[styles.code, {
        color: colors.icon,
        fontFamily: Fonts.mono
      }]}>
        const example = "monospace font";
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    padding: 16,
    borderRadius: 12,
    gap: 12,
  },
  title: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  body: {
    fontSize: 16,
    lineHeight: 24,
  },
  badge: {
    paddingHorizontal: 12,
    paddingVertical: 6,
    borderRadius: 16,
    alignSelf: 'flex-start',
  },
  code: {
    fontSize: 14,
    padding: 8,
    backgroundColor: '#f5f5f5',
  },
});

// Available colors:
// Light mode: text=#11181C, background=#fff, tint=#0a7ea4, icon=#687076
// Dark mode: text=#ECEDEE, background=#151718, tint=#fff, icon=#9BA1A6
//
// Font families (platform-specific):
// iOS: sans='system-ui', serif='ui-serif', rounded='ui-rounded', mono='ui-monospace'
// Android: sans='normal', serif='serif', rounded='normal', mono='monospace'
// Web: Full system font stacks with fallbacks

```

--------------------------------

### Integrating Haptic Feedback on iOS with Expo Haptics

Source: https://context7.com/nivlekrod/amparo/llms.txt

This TypeScript/React Native component demonstrates integrating platform-specific haptic feedback using the `expo-haptics` library. It provides examples for light, medium, and heavy impacts, as well as notification and selection feedback types. The haptic feedback is conditionally applied only on iOS devices, with console logs indicating the action. It's important to note that haptics are iOS-specific and may require additional permissions on Android, while Web has no support.

```tsx
import * as Haptics from 'expo-haptics';
import { TouchableOpacity, View } from 'react-native';
import { ThemedText } from '@/components/themed-text';

export default function HapticExamples() {
  const handleLightImpact = async () => {
    if (process.env.EXPO_OS === 'ios') {
      await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
    }
    console.log('Light impact');
  };

  const handleMediumImpact = async () => {
    if (process.env.EXPO_OS === 'ios') {
      await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
    }
    console.log('Medium impact');
  };

  const handleHeavyImpact = async () => {
    if (process.env.EXPO_OS === 'ios') {
      await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
    }
    console.log('Heavy impact');
  };

  const handleNotification = async () => {
    if (process.env.EXPO_OS === 'ios') {
      await Haptics.notificationAsync(
        Haptics.NotificationFeedbackType.Success
      );
    }
    console.log('Notification success');
  };

  const handleSelection = async () => {
    if (process.env.EXPO_OS === 'ios') {
      await Haptics.selectionAsync();
    }
    console.log('Selection changed');
  };

  return (
    <View style={{ padding: 20, gap: 12 }}>
      <TouchableOpacity
        onPress={handleLightImpact}
        style={{ padding: 12, backgroundColor: '#f0f0f0' }}>
        <ThemedText>Light Impact (used in tab navigation)</ThemedText>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={handleMediumImpact}
        style={{ padding: 12, backgroundColor: '#f0f0f0' }}>
        <ThemedText>Medium Impact</ThemedText>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={handleHeavyImpact}
        style={{ padding: 12, backgroundColor: '#f0f0f0' }}>
        <ThemedText>Heavy Impact</ThemedText>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={handleNotification}
        style={{ padding: 12, backgroundColor: '#4CAF50' }}>
        <ThemedText lightColor="#fff">Notification Success</ThemedText>
      </TouchableOpacity>

      <TouchableOpacity
        onPress={handleSelection}
        style={{ padding: 12, backgroundColor: '#f0f0f0' }}>
        <ThemedText>Selection Feedback</ThemedText>
      </TouchableOpacity>
    </View>
  );
}

// Note: Haptics only work on iOS physical devices
// Android requires additional vibration permissions
// Web has no haptic feedback support
```

--------------------------------

### React Native Image Handling with Expo Image

Source: https://context7.com/nivlekrod/amparo/llms.txt

This code snippet demonstrates how to use the 'expo-image' library for various image management tasks in React Native. It includes handling local images with automatic density selection, remote images with caching and placeholders, and using images as backgrounds with overlaid content. The 'expo-image' library simplifies image loading and display, improving performance and user experience.

```tsx
import { Image } from 'expo-image';
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';

export default function ImageExamples() {
  return (
    <ThemedView style={{ padding: 20, gap: 20 }}>
      {/* Automatic density selection */}
      <Image
        source={require('@/assets/images/react-logo.png')}
        style={{ width: 200, height: 200 }}
        contentFit="contain"
      />
      {/*
        React Native automatically selects:
        - react-logo.png for 1x displays (mdpi)
        - react-logo@2x.png for 2x displays (xhdpi, xxhdpi)
        - react-logo@3x.png for 3x displays (xxxhdpi)
      */}

      {/* Remote image with caching */}
      <Image
        source={{ uri: 'https://example.com/avatar.jpg' }}
        style={{ width: 100, height: 100, borderRadius: 50 }}
        contentFit="cover"
        placeholder={require('@/assets/images/placeholder.png')}
        transition={300}
      />

      {/* Static assets with specific density */}
      <ThemedView style={{ flexDirection: 'row', gap: 10 }}>
        <Image
          source={require('@/assets/images/icon.png')}
          style={{ width: 48, height: 48 }}
        />
        <ThemedText>App icon automatically scaled</ThemedText>
      </ThemedView>

      {/* Background image */}
      <Image
        source={require('@/assets/images/partial-react-logo.png')}
        style={{ width: '100%', height: 200 }}
        contentFit="cover">
        <ThemedView
          style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center',
            backgroundColor: 'rgba(0,0,0,0.3)'
          }}>
          <ThemedText lightColor="#fff" darkColor="#fff" type="title">
            Overlay Text
          </ThemedText>
        </ThemedView>
      </Image>
    </ThemedView>
  );
}

// Asset organization:
// assets/images/icon.png (required for 1x)
// assets/images/icon@2x.png (optional for 2x)
// assets/images/icon@3x.png (optional for 3x)

```

--------------------------------

### Expo Router Root Layout Configuration

Source: https://context7.com/nivlekrod/amparo/llms.txt

This snippet shows the root layout configuration for an Expo Router application. It sets up the navigation stack using `expo-router`'s `Stack` component and integrates with `@react-navigation/native` for theme management. It defines screens, including a main tab navigation, a modal screen with specific presentation options, and other regular screens with customizable headers.

```tsx
// app/_layout.tsx
import { DarkTheme, DefaultTheme, ThemeProvider } from '@react-navigation/native';
import { Stack } from 'expo-router';
import { StatusBar } from 'expo-status-bar';
import { useColorScheme } from '@/hooks/use-color-scheme';

// Set default route to tabs
export const unstable_settings = {
  anchor: '(tabs)',
};

export default function RootLayout() {
  const colorScheme = useColorScheme();

  return (
    <ThemeProvider value={colorScheme === 'dark' ? DarkTheme : DefaultTheme}>
      <Stack>
        {/* Main tab navigation - header hidden */}
        <Stack.Screen
          name="(tabs)"
          options={{ headerShown: false }}
        />

        {/* Modal screen with modal presentation */}
        <Stack.Screen
          name="modal"
          options={{
            presentation: 'modal',
            title: 'Modal Example'
          }}
        />

        {/* Add more screens as needed */}
        <Stack.Screen
          name="settings"
          options={{
            title: 'Settings',
            headerBackTitle: 'Back'
          }}
        />
      </Stack>

      {/* Auto-adjusts based on theme */}
      <StatusBar style="auto" />
    </ThemeProvider>
  );
}
```

--------------------------------

### Displaying Icons Cross-Platform with SF Symbols and Material Icons

Source: https://context7.com/nivlekrod/amparo/llms.txt

This TypeScript/React Native component displays icons using the IconSymbol component. It leverages SF Symbols on iOS and Material Icons on Android/Web. The component accepts icon names, sizes, colors, weights, and styles as props. It includes a mapping from SF Symbol names to Material Icon names for cross-platform compatibility. Note that 'weight' accepts a specific set of predefined values.

```tsx
import { IconSymbol } from '@/components/ui/icon-symbol';
import { ThemedView } from '@/components/themed-view';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';

export default function IconExamples() {
  const colorScheme = useColorScheme() ?? 'light';
  const iconColor = Colors[colorScheme].icon;

  return (
    <ThemedView style={{ padding: 20, gap: 16, flexDirection: 'row' }}>
      {/* SF Symbol on iOS, Material Icon on Android/Web */}
      <IconSymbol
        name="house.fill"
        size={32}
        color={iconColor}
        weight="regular"
      />

      <IconSymbol
        name="paperplane.fill"
        size={32}
        color={iconColor}
        weight="medium"
      />

      <IconSymbol
        name="chevron.right"
        size={24}
        color="#0a7ea4"
        weight="semibold"
        style={{ transform: [{ rotate: '90deg' }] }}
      />

      <IconSymbol
        name="chevron.left.forwardslash.chevron.right"
        size={28}
        color={iconColor}
      />

      {/* Weights: ultraLight, thin, light, regular, medium, semibold, bold, heavy, black */}
      <IconSymbol
        name="star.fill"
        size={28}
        color="#FFD700"
        weight="bold"
      />
    </ThemedView>
  );
}

// SF Symbol to Material Icon mapping:
// 'house.fill' → 'home'
// 'paperplane.fill' → 'send'
// 'chevron.left.forwardslash.chevron.right' → 'code'
// 'chevron.right' → 'chevron-right'
```

--------------------------------

### useColorScheme Hook for Platform-Specific Color Schemes (React Native/Web)

Source: https://context7.com/nivlekrod/amparo/llms.txt

A custom hook that retrieves the current color scheme, offering platform-specific handling for web SSR hydration. It returns 'light', 'dark', or null for system default. Dependencies include '@/hooks/use-color-scheme' and '@/constants/theme'.

```tsx
import { useColorScheme } from '@/hooks/use-color-scheme';
import { Colors } from '@/constants/theme';

export default function AdaptiveComponent() {
  const colorScheme = useColorScheme(); // Returns 'light' | 'dark' | null

  // Apply theme-specific logic
  const isDark = colorScheme === 'dark';
  const backgroundColor = isDark ? Colors.dark.background : Colors.light.background;

  return (
    <View style={{ backgroundColor, flex: 1 }}>
      <Text>
        Current theme: {colorScheme ?? 'system default'}
      </Text>
      {isDark && <Text>Dark mode is active</Text>}
    </View>
  );
}

// Web-specific: Prevents hydration mismatch during SSR
// Native: Direct access to system color scheme via React Native

```

--------------------------------

### Configure Bottom Tab Navigator with Haptic Feedback and Theme Icons

Source: https://context7.com/nivlekrod/amparo/llms.txt

This snippet configures a bottom tab navigator using Expo Router. It includes haptic feedback on tab presses (iOS only) and uses theme-aware icons. Dependencies include 'expo-router', 'react-native', and custom components for haptic tabs and icon symbols.

```tsx
// app/(tabs)/_layout.tsx
import { Tabs } from 'expo-router';
import { HapticTab } from '@/components/haptic-tab';
import { IconSymbol } from '@/components/ui/icon-symbol';
import { Colors } from '@/constants/theme';
import { useColorScheme } from '@/hooks/use-color-scheme';

export default function TabLayout() {
  const colorScheme = useColorScheme();

  return (
    <Tabs
      screenOptions={{
        // Theme-aware active tab color
        tabBarActiveTintColor: Colors[colorScheme ?? 'light'].tint,
        headerShown: false,
        // Haptic feedback on tab press (iOS only)
        tabBarButton: HapticTab,
      }}>

      <Tabs.Screen
        name="index"
        options={{
          title: 'Home',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="house.fill" color={color} />
          ),
        }}
      />

      <Tabs.Screen
        name="explore"
        options={{
          title: 'Explore',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="paperplane.fill" color={color} />
          ),
        }}
      />

      <Tabs.Screen
        name="profile"
        options={{
          title: 'Profile',
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="person.circle" color={color} />
          ),
          // Show badge on tab
          tabBarBadge: 3,
        }}
      />
    </Tabs>
  );
}
```

--------------------------------

### ExternalLink Component for Cross-Platform Linking

Source: https://context7.com/nivlekrod/amparo/llms.txt

The ExternalLink component allows opening URLs in the system browser on native platforms (iOS/Android) or a new tab on web. It supports custom styling and can be used with nested components for link text or custom button-like appearances. This component ensures consistent link behavior across different environments.

```tsx
import { ExternalLink } from '@/components/external-link';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';

export default function ResourcesScreen() {
  return (
    <ThemedView style={{ padding: 20, gap: 16 }}>
      <ThemedText type="title">External Resources</ThemedText>

      {/* Opens in-app browser on iOS/Android, new tab on web */}
      <ExternalLink href="https://docs.expo.dev">
        <ThemedText type="link">Expo Documentation</ThemedText>
      </ExternalLink>

      <ExternalLink href="https://reactnative.dev">
        <ThemedText type="link">React Native Docs</ThemedText>
      </ExternalLink>

      {/* Styled external link with custom appearance */}
      <ExternalLink href="https://github.com/expo/expo">
        <ThemedView
          style={{
            padding: 12,
            backgroundColor: '#24292e',
            borderRadius: 8
          }}>
          <ThemedText lightColor="#ffffff" darkColor="#ffffff">
            View on GitHub
          </ThemedText>
        </ThemedView>
      </ExternalLink>

      {/* Native: expo-web-browser with AUTOMATIC presentation style */}
      {/* Web: Opens in new tab via target="_blank" */}
    </ThemedView>
  );
}
```

--------------------------------

### Collapsible Component for Expandable Sections (React Native)

Source: https://context7.com/nivlekrod/amparo/llms.txt

A reusable component that creates an expandable/collapsible section with an animated chevron icon and theme-aware styling. It relies on '@/components/ui/collapsible', '@/components/themed-text', and '@/components/themed-view'.

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

export default function FAQScreen() {
  return (
    <ThemedView style={{ padding: 20, gap: 12 }}>
      <ThemedText type="title">Frequently Asked Questions</ThemedText>

      <Collapsible title="What is Expo Router?">
        <ThemedText>
          Expo Router is a file-based routing system for React Native apps.
          It uses the file system to define your app's navigation structure,
          similar to Next.js for web applications.
        </ThemedText>
        <ThemedText style={{ marginTop: 8 }}>
          Features include: typed routes, deep linking, modal presentations,
          and seamless navigation between screens.
        </ThemedText>
      </Collapsible>

      <Collapsible title="How does theming work?">
        <ThemedText>
          The app automatically detects your device's color scheme
          (light or dark) and applies the appropriate theme colors
          from constants/theme.ts.
        </ThemedText>
      </Collapsible>

      <Collapsible title="Platform-specific features">
        <ThemedText>
          • iOS: SF Symbols, haptic feedback, context menus
        </ThemedText>
        <ThemedText>
          • Android: Material Icons, edge-to-edge display
        </ThemedText>
        <ThemedText>
          • Web: Static site generation, responsive layouts
        </ThemedText>
      </Collapsible>
    </ThemedView>
  );
}

```

--------------------------------

### ThemedText Component in TypeScript (React Native)

Source: https://context7.com/nivlekrod/amparo/llms.txt

The ThemedText component provides theme-aware text rendering, automatically adapting its color and typography based on the current light or dark mode. It supports predefined text types and allows for custom color overrides. This component is crucial for maintaining consistent UI theming across the application.

```tsx
import { ThemedText } from '@/components/themed-text';

// Basic usage with predefined types
export default function MyScreen() {
  return (
    <>
      <ThemedText type="title">Welcome to AmparoApp</ThemedText>
      <ThemedText type="subtitle">Getting Started Guide</ThemedText>
      <ThemedText type="defaultSemiBold">Important Information</ThemedText>
      <ThemedText type="default">Regular body text that adapts to theme</ThemedText>
      <ThemedText type="link">Click here to learn more</ThemedText>
    </>
  );
}

// Custom colors override theme defaults
function CustomThemedExample() {
  return (
    <>
      <ThemedText lightColor="#FF0000" darkColor="#00FF00">
        Red in light mode, green in dark mode
      </ThemedText>
      <ThemedText darkColor="#FFFFFF">
        Uses default light color, white in dark mode
      </ThemedText>
    </>
  );
}

// Typography reference:
// - default: 16px, lineHeight 24
// - title: 32px bold, lineHeight 32
// - defaultSemiBold: 16px, fontWeight 600, lineHeight 24
// - subtitle: 20px bold
// - link: 16px, color #0a7ea4, lineHeight 30

```

--------------------------------

### ParallaxScrollView Component for Animated Scroll Effects (React Native)

Source: https://context7.com/nivlekrod/amparo/llms.txt

An advanced scroll view component that implements an animated parallax header effect using react-native-reanimated. It requires components from '@/components/parallax-scroll-view', 'expo-image', '@/components/themed-text', and '@/components/themed-view'.

```tsx
import ParallaxScrollView from '@/components/parallax-scroll-view';
import { Image } from 'expo-image';
import { ThemedText } from '@/components/themed-text';
import { ThemedView } from '@/components/themed-view';

export default function ProductScreen() {
  return (
    <ParallaxScrollView
      headerBackgroundColor={{ light: '#A1CEDC', dark: '#1D3D47' }}
      headerImage={
        <Image
          source={require('@/assets/images/product-hero.png')}
          style={{ width: '100%', height: 250 }}
          contentFit="cover"
        />
      }> 

      <ThemedView style={{ gap: 16 }}>
        <ThemedText type="title">Product Details</ThemedText>

        <ThemedText>
          The header image scales and translates as you scroll, creating
          a smooth parallax effect. Scroll up to see the header zoom in,
          scroll down to see it translate away.
        </ThemedText>

        <ThemedView style={{ padding: 16, gap: 8 }}>
          <ThemedText type="subtitle">Features</ThemedText>
          <ThemedText>• Header height: 250px</ThemedText>
          <ThemedText>• Parallax range: -125px to 187.5px</ThemedText>
          <ThemedText>• Scale effect: 1x to 2x on upward scroll</ThemedText>
          <ThemedText>• Scroll throttle: 16ms (60fps)</ThemedText>
        </ThemedView>

        {/* Add more content to enable scrolling */}
        {[...Array(10)].map((_, i) => (
          <ThemedText key={i}>Content section {i + 1}</ThemedText>
        ))}
      </ThemedView>
    </ParallaxScrollView>
  );
}

```

--------------------------------

### ThemedView Component in TypeScript (React Native)

Source: https://context7.com/nivlekrod/amparo/llms.txt

The ThemedView component offers theme-aware background colors, automatically adjusting to the current color scheme (light/dark mode). It can apply default theme backgrounds or accept custom background colors for specific elements. This component is essential for creating visually consistent containers that adapt to user preferences.

```tsx
import { ThemedView } from '@/components/themed-view';
import { ThemedText } from '@/components/themed-text';

export default function ProfileScreen() {
  return (
    <ThemedView style={{ flex: 1, padding: 20 }}>
      <ThemedText type="title">User Profile</ThemedText>

      {/* Nested themed views with custom colors */}
      <ThemedView
        lightColor="#F5F5F5"
        darkColor="#2A2A2A"
        style={{ padding: 16, borderRadius: 8, marginTop: 10 }}>
        <ThemedText>This card adapts its background to the theme</ThemedText>
        <ThemedText>Light mode: #F5F5F5, Dark mode: #2A2A2A</ThemedText>
      </ThemedView>

      {/* Default themed background */}
      <ThemedView style={{ marginTop: 20, padding: 10 }}>
        <ThemedText>Uses default background colors from theme palette</ThemedText>
        <ThemedText type="defaultSemiBold">
          Light: #fff, Dark: #151718
        </ThemedText>
      </ThemedView>
    </ThemedView>
  );
}

```

--------------------------------

### useThemeColor Hook in TypeScript (React Native)

Source: https://context7.com/nivlekrod/amparo/llms.txt

The useThemeColor hook provides a convenient way to access theme-aware color values within React Native components. It allows for specifying custom light and dark color overrides or falling back to the global color palette defined in the theme. This hook simplifies the management of colors across different themes and UI elements.

```tsx
import { useThemeColor } from '@/hooks/use-theme-color';
import { View, Text } from 'react-native';

function CustomButton() {
  // Get theme color with custom overrides
  const backgroundColor = useThemeColor(
    { light: '#0a7ea4', dark: '#ffffff' },
    'tint'
  );

  const textColor = useThemeColor(
    { light: '#ffffff', dark: '#000000' },
    'text'
  );

  return (
    <View style={{ backgroundColor, padding: 12, borderRadius: 8 }}>
      <Text style={{ color: textColor, fontWeight: '600' }}>
        Themed Button
      </Text>
    </View>
  );
}

function IconWithThemeColor() {
  // Use default palette colors (no custom colors)
  const iconColor = useThemeColor({}, 'icon');
  const tintColor = useThemeColor({}, 'tint');

  return (
    <>
      <IconComponent color={iconColor} /> {/* #687076 light, #9BA1A6 dark */}
      <IconComponent color={tintColor} /> {/* #0a7ea4 light, #fff dark */}
    </>
  );
}

// Available color keys from palette:
// 'text', 'background', 'tint', 'icon', 'tabIconDefault', 'tabIconSelected'

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.