Utility Components

/**
 * Themed text component with automatic theme color application
 * @param props - Text properties from React Native
 * @returns React element representing themed text
 */
function Text(props: TextProps): React.ReactElement;

import { Text } from "@react-navigation/elements";

// Basic themed text
<Text>This text uses the navigation theme colors</Text>

// Styled text
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
  Bold themed text
</Text>

// Text with all React Native Text props
<Text 
  numberOfLines={2}
  ellipsizeMode="tail"
  onPress={() => console.log('Text pressed')}
  style={{ color: '#666' }}
>
  This is a long text that will be truncated after two lines and has custom styling
</Text>

// Accessibility text
<Text 
  accessibilityRole="header"
  accessibilityLevel={1}
  style={{ fontSize: 24, marginBottom: 16 }}
>
  Section Header
</Text>

/**
 * Centered text component with tint color support for labels
 * @param props - Label configuration and styling
 * @returns React element representing a centered label
 */
function Label(props: {
  /** Label text color override */
  tintColor?: string;
  /** Label text content */
  children?: string;
  /** Custom label styling */
  style?: StyleProp<TextStyle>;
} & Omit<TextProps, 'style'>): React.ReactElement;

import { Label } from "@react-navigation/elements";

// Basic label
<Label>Settings</Label>

// Colored label
<Label tintColor="#007AFF">
  Primary Action
</Label>

// Styled label
<Label 
  tintColor="#FF3B30"
  style={{ fontSize: 16, fontWeight: '600' }}
>
  Delete Item
</Label>

// Label with additional props
<Label 
  tintColor="#34C759"
  numberOfLines={1}
  ellipsizeMode="middle"
>
  Very Long Label That Gets Truncated
</Label>

/**
 * Fallback icon component for when actual icons are missing
 * @param props - Icon configuration and styling
 * @returns React element representing a fallback icon (⏷)
 */
function MissingIcon(props: {
  /** Icon color */
  color?: string;
  /** Icon size in points/pixels */
  size?: number;
  /** Custom icon styling */
  style?: StyleProp<TextStyle>;
}): React.ReactElement;

import { MissingIcon } from "@react-navigation/elements";

// Basic missing icon placeholder
<MissingIcon />

// Colored and sized missing icon
<MissingIcon 
  color="#666666"
  size={24}
/>

// Styled missing icon
<MissingIcon 
  color="#FF3B30"
  size={20}
  style={{ marginRight: 8 }}
/>

// In a conditional icon setup
function IconDisplay({ iconName, color, size }) {
  return (
    <View>
      {iconName ? (
        <Icon name={iconName} color={color} size={size} />
      ) : (
        <MissingIcon color={color} size={size} />
      )}
    </View>
  );
}

/**
 * Performance optimization component for efficient content show/hide
 * @param props - Visibility configuration and content
 * @returns React element that efficiently manages content visibility
 */
function ResourceSavingView(props: {
  /** Whether content should be visible (required) */
  visible: boolean;
  /** Content to show/hide (required) */
  children: React.ReactNode;
  /** Custom container styling */
  style?: StyleProp<ViewStyle>;
}): React.ReactElement;

import { ResourceSavingView } from "@react-navigation/elements";

// Basic conditional rendering
<ResourceSavingView visible={showDetails}>
  <View style={styles.detailsPanel}>
    <Text>Expensive content that should be hidden when not needed</Text>
    <ComplexChart data={chartData} />
  </View>
</ResourceSavingView>

// In a tab or accordion interface
function AccordionItem({ title, isExpanded, onToggle, children }) {
  return (
    <View>
      <TouchableOpacity onPress={onToggle}>
        <Text>{title}</Text>
      </TouchableOpacity>
      <ResourceSavingView visible={isExpanded}>
        <View style={styles.accordionContent}>
          {children}
        </View>
      </ResourceSavingView>
    </View>
  );
}

// For screen content that might be offscreen
function TabPanel({ isActive, children }) {
  return (
    <ResourceSavingView 
      visible={isActive}
      style={{ flex: 1 }}
    >
      {children}
    </ResourceSavingView>
  );
}

// Performance-critical list items
function ListItem({ item, isVisible }) {
  return (
    <View style={styles.listItem}>
      <Text>{item.title}</Text>
      <ResourceSavingView visible={isVisible}>
        <ExpensiveSubComponent data={item.details} />
      </ResourceSavingView>
    </View>
  );
}

import { useTheme } from '@react-navigation/native';
import { Text, Label } from "@react-navigation/elements";

function ThemedComponent() {
  const theme = useTheme();
  
  return (
    <View>
      {/* These components automatically use theme colors */}
      <Text>Themed text using navigation theme</Text>
      <Label>Themed label using navigation theme</Label>
      
      {/* Manual theme usage */}
      <MissingIcon color={theme.colors.text} size={20} />
    </View>
  );
}

// Always renders expensive content, even when hidden
<View style={{ opacity: showContent ? 1 : 0 }}>
  <ExpensiveComponent /> {/* Always mounted and rendered */}
</View>

// Only renders content when visible
<ResourceSavingView visible={showContent}>
  <ExpensiveComponent /> {/* Only mounted when visible */}
</ResourceSavingView>

// Good: Theme-aware styling
<Text style={{ color: theme.colors.text }}>
  Themed text
</Text>

// Better: Automatic theme integration
<Text>
  Automatically themed text
</Text>