React Native Elements

import { 
  Button, Input, Icon, Text,
  Card, Header, ListItem, 
  ThemeProvider, useTheme 
} from 'react-native-elements';

const { 
  Button, Input, Icon, Text,
  Card, Header, ListItem, 
  ThemeProvider, useTheme 
} = require('react-native-elements');

import React from 'react';
import { 
  Button, Input, Icon, Card, 
  ThemeProvider, Header 
} from 'react-native-elements';

const theme = {
  colors: {
    primary: '#007AFF',
    secondary: '#5856D6',
  }
};

export default function App() {
  return (
    <ThemeProvider theme={theme}>
      <Header 
        centerComponent={{ text: 'My App', style: { color: '#fff' } }}
        backgroundColor={theme.colors.primary}
      />
      
      <Card>
        <Input
          placeholder="Enter your name"
          leftIcon={{ type: 'material', name: 'person' }}
        />
        
        <Button
          title="Submit"
          icon={<Icon name="check" color="#fff" />}
          buttonStyle={{ backgroundColor: theme.colors.primary }}
        />
      </Card>
    </ThemeProvider>
  );
}

// Button with multiple variants and customization
interface ButtonProps extends TouchableOpacityProps {
  title?: string | React.ReactElement;
  type?: 'solid' | 'clear' | 'outline';
  loading?: boolean;
  icon?: IconNode;
  buttonStyle?: StyleProp<ViewStyle>;
}

// Enhanced input with labels and error handling
interface InputProps extends TextInputProps {
  label?: string | React.ReactNode;
  errorMessage?: string;
  leftIcon?: IconNode;
  rightIcon?: IconNode;
}

// Vector icons with multiple font family support
interface IconProps extends TouchableOpacityProps {
  name?: string;
  type?: IconType;
  size?: number;
  color?: string;
}

// Compound list item with sub-components
interface ListItemProps extends TouchableHighlightProps {
  topDivider?: boolean;
  bottomDivider?: boolean;
  pad?: number;
}

// Navigation header with configurable sections
interface HeaderProps {
  leftComponent?: HeaderSubComponent;
  centerComponent?: HeaderSubComponent;
  rightComponent?: HeaderSubComponent;
  backgroundColor?: string;
}

// Platform-specific search input
interface SearchBarProps {
  platform: 'default' | 'ios' | 'android';
  value?: string;
  onChangeText?(text: string): void;
  showLoading?: boolean;
}

// Customizable checkbox with various styles
interface CheckBoxProps extends TouchableOpacityProps {
  checked?: boolean;
  title?: string | React.ReactElement;
  checkedIcon?: IconNode;
  uncheckedIcon?: IconNode;
}

// User profile image with fallbacks
interface AvatarProps extends TouchableOpacityProps {
  source?: ImageSourcePropType;
  title?: string;
  size?: 'small' | 'medium' | 'large' | 'xlarge' | number;
  rounded?: boolean;
}

// Status indicator badge
interface BadgeProps {
  value?: React.ReactNode;
  status?: 'primary' | 'success' | 'warning' | 'error';
  badgeStyle?: StyleProp<ViewStyle>;
}

// Modal overlay component
interface OverlayProps {
  isVisible: boolean;
  onBackdropPress?(): void;
  children: React.ReactNode;
}

// Contextual tooltip
interface TooltipProps {
  popover: React.ReactElement;
  children: React.ReactElement;
  height?: number;
  width?: number;
}

// Pricing plan display
interface PricingCardProps {
  price: string | number;
  title?: string;
  info?: string[];
  button?: ButtonProps;
}

// Social media platform icons
interface SocialIconProps extends TouchableOpacityProps {
  type: SocialMediaType;
  raised?: boolean;
  light?: boolean;
}

// Theme provider component
interface ThemeProviderProps {
  theme: Partial<FullTheme>;
  useDark?: boolean;
  children: React.ReactNode;
}

// Theme context hook
function useTheme(): {
  theme: FullTheme;
  updateTheme: UpdateTheme;
  replaceTheme: ReplaceTheme;
};

// Dynamic style creation
function makeStyles<T extends StyleSheet.NamedStyles<T> | StyleSheet.NamedStyles<any>>(
  styles: T | ((theme: FullTheme, props?: any) => T)
): (props?: any) => T;

// Icon type registration
function registerCustomIconType(id: string, customIcon: any): void;

// Responsive text scaling
function normalize(size: number, factor?: number): number;

// Badge enhancement HOC
function withBadge<P>(badgeProps?: BadgeProps): (WrappedComponent: React.ComponentType<P>) => React.ComponentType<P>;

// Core theme interfaces
interface FullTheme {
  colors: Colors;
  Button: Partial<ButtonProps>;
  Input: Partial<InputProps>;
  Header: Partial<HeaderProps>;
  // ... other component theme overrides
}

interface Colors {
  primary: string;
  secondary: string;
  success: string;
  warning: string;
  error: string;
  white: string;
  black: string;
  grey0: string;
  grey1: string;
  grey2: string;
  grey3: string;
  grey4: string;
  grey5: string;
  greyOutline: string;
  searchBg: string;
  disabled: string;
  divider: string;
  platform: {
    ios: Partial<Colors>;
    android: Partial<Colors>;
    web: Partial<Colors>;
  };
}

// Icon system types
type IconType = 
  | 'material' 
  | 'material-community' 
  | 'font-awesome' 
  | 'font-awesome-5' 
  | 'ionicon' 
  | 'feather' 
  | 'entypo' 
  | 'foundation' 
  | 'antdesign' 
  | 'evilicon' 
  | 'simple-line-icon' 
  | 'zocial' 
  | 'octicon' 
  | 'fontisto';

type IconNode = boolean | React.ReactElement | Partial<IconProps>;

// Theme function types
type UpdateTheme = (updates: Partial<FullTheme>) => void;
type ReplaceTheme = (theme: FullTheme) => void;