Core Components

/**
 * Customizable button component with multiple variants and icon support
 */
interface ButtonProps extends TouchableOpacityProps {
  /** Button text or custom element */
  title?: string | React.ReactElement;
  /** Button style variant (default: 'solid') */
  type?: 'solid' | 'clear' | 'outline';
  /** Shows loading spinner when true */
  loading?: boolean;
  /** Disables button interaction */
  disabled?: boolean;
  /** Icon to display */
  icon?: IconNode;
  /** Position icon on right side of title */
  iconRight?: boolean;
  /** Adds shadow/elevation effect */
  raised?: boolean;
  /** Custom button container styles */
  buttonStyle?: StyleProp<ViewStyle>;
  /** Custom title text styles */
  titleStyle?: StyleProp<TextStyle>;
  /** Props for title Text component */
  titleProps?: TextProps;
  /** Outer container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Icon container styles */
  iconContainerStyle?: StyleProp<ViewStyle>;
  /** Loading spinner configuration */
  loadingProps?: ActivityIndicatorProps;
  /** Loading container styles */
  loadingStyle?: StyleProp<ViewStyle>;
  /** Disabled button styles */
  disabledStyle?: StyleProp<ViewStyle>;
  /** Disabled title styles */
  disabledTitleStyle?: StyleProp<TextStyle>;
  /** Custom touchable component */
  TouchableComponent?: typeof React.Component;
  /** Custom view component for gradients */
  ViewComponent?: typeof React.Component;
  /** Props for linear gradient backgrounds */
  linearGradientProps?: object;
}

import { Button, Icon } from 'react-native-elements';

// Basic button
<Button title="Press Me" onPress={handlePress} />

// Button with icon
<Button
  title="Save"
  icon={<Icon name="save" color="#fff" />}
  buttonStyle={{ backgroundColor: '#007AFF' }}
/>

// Loading button
<Button
  title="Loading..."
  loading={isLoading}
  disabled={isLoading}
  loadingProps={{ color: '#fff' }}
/>

// Outline button with right icon
<Button
  title="Next"
  type="outline"
  icon={{ name: 'arrow-forward', color: '#007AFF' }}
  iconRight={true}
/>

// Raised button with gradient
<Button
  title="Gradient"
  raised
  linearGradientProps={{
    colors: ['#FF6B6B', '#FF8E53'],
    start: { x: 0, y: 0.5 },
    end: { x: 1, y: 0.5 },
  }}
/>

/**
 * Enhanced text input with labels, icons, and error handling
 */
interface InputProps extends React.ComponentPropsWithRef<typeof TextInput> {
  /** Outer container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Disables input interaction */
  disabled?: boolean;
  /** Disabled input text styles */
  disabledInputStyle?: StyleProp<TextStyle>;
  /** Input container styles */
  inputContainerStyle?: StyleProp<ViewStyle>;
  /** Icon on left side */
  leftIcon?: IconNode;
  /** Left icon container styles */
  leftIconContainerStyle?: StyleProp<ViewStyle>;
  /** Icon on right side */
  rightIcon?: IconNode;
  /** Right icon container styles */
  rightIconContainerStyle?: StyleProp<ViewStyle>;
  /** Text input styles */
  inputStyle?: StyleProp<TextStyle>;
  /** Custom input component */
  InputComponent?: typeof React.Component;
  /** Error message props */
  errorProps?: object;
  /** Error message styles */
  errorStyle?: StyleProp<TextStyle>;
  /** Error text to display */
  errorMessage?: string;
  /** Input label text or component */
  label?: string | React.ReactNode;
  /** Label text styles */
  labelStyle?: StyleProp<TextStyle>;
  /** Label component props */
  labelProps?: object;
  /** Whether to show error message space */
  renderErrorMessage?: boolean;
}

/**
 * Input component methods (class-based component)
 */
interface InputMethods {
  /** Focus the input */
  focus(): void;
  /** Blur the input */
  blur(): void;
  /** Clear the input text */
  clear(): void;
  /** Trigger shake animation */
  shake(): void;
  /** Check if input is focused */
  isFocused(): boolean;
}

import React, { useRef } from 'react';
import { Input } from 'react-native-elements';

// Basic input with label
<Input
  label="Email"
  placeholder="Enter your email"
  keyboardType="email-address"
  autoCapitalize="none"
/>

// Input with icons and validation
<Input
  label="Password"
  placeholder="Enter password"
  secureTextEntry
  leftIcon={{ type: 'material', name: 'lock' }}
  rightIcon={{ type: 'material', name: 'visibility' }}
  errorMessage={passwordError}
/>

// Input with custom styling
<Input
  label="Username"
  labelStyle={{ color: '#007AFF' }}
  inputStyle={{ fontSize: 16 }}
  inputContainerStyle={{ borderBottomColor: '#007AFF' }}
  leftIcon={{ type: 'material', name: 'person', color: '#007AFF' }}
/>

// Using input methods
const inputRef = useRef<Input>(null);

const handleFocus = () => {
  inputRef.current?.focus();
};

<Input
  ref={inputRef}
  label="Focus Me"
  placeholder="Click button to focus"
/>

/**
 * Themed text component with consistent styling
 */
interface TextProps extends RNTextProps {
  /** Text content */
  children?: React.ReactNode;
  /** Predefined text style variants */
  h1?: boolean;
  h2?: boolean;
  h3?: boolean;
  h4?: boolean;
  /** Custom text styles */
  style?: StyleProp<TextStyle>;
}

import { Text } from 'react-native-elements';

// Basic themed text
<Text>This text uses the default theme styling</Text>

// Header text variants
<Text h1>Main Heading</Text>
<Text h2>Sub Heading</Text>
<Text h3>Section Title</Text>
<Text h4>Subsection</Text>

// Custom styled text
<Text style={{ color: '#007AFF', fontSize: 18, fontWeight: 'bold' }}>
  Custom Styled Text
</Text>

// Text with theme integration
const { theme } = useTheme();
<Text style={{ color: theme.colors.primary }}>
  Theme-aware text
</Text>

/**
 * Vector icon component with multiple icon family support
 */
interface IconProps extends TouchableOpacityProps {
  /** Icon name from the icon family */
  name?: string;
  /** Icon family type */
  type?: IconType;
  /** Icon size (default: 24) */
  size?: number;
  /** Icon color */
  color?: string;
  /** Inverted color scheme */
  reverse?: boolean;
  /** Adds shadow/elevation */
  raised?: boolean;
  /** Disabled state */
  disabled?: boolean;
  /** Solid variant (for FontAwesome 5) */
  solid?: boolean;
  /** Brand variant (for FontAwesome 5) */
  brand?: boolean;
  /** Container styles */
  containerStyle?: StyleProp<ViewStyle>;
  /** Icon-specific styles */
  iconStyle?: StyleProp<TextStyle>;
  /** Custom touchable component */
  Component?: typeof React.Component;
  /** Touch handler (makes icon touchable) */
  onPress?: () => void;
}

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

/**
 * Icon node type for component props
 */
type IconNode = boolean | React.ReactElement | Partial<IconProps>;

/**
 * Icon object configuration
 */
interface IconObject {
  name?: string;
  type?: IconType;
  size?: number;
  color?: string;
}

import { Icon } from 'react-native-elements';

// Basic material icon
<Icon name="home" type="material" />

// FontAwesome icon with customization
<Icon
  name="heart"
  type="font-awesome"
  color="#e91e63"
  size={30}
/>

// Touchable icon with handler
<Icon
  name="settings"
  type="material"
  onPress={openSettings}
  containerStyle={{ padding: 10 }}
/>

// Raised icon with reverse colors
<Icon
  name="star"
  type="material"
  raised
  reverse
  color="#f39c12"
/>

// Icon with custom styling
<Icon
  name="check-circle"
  type="material"
  size={40}
  color="#27ae60"
  containerStyle={{
    backgroundColor: '#ecf0f1',
    borderRadius: 25,
    padding: 5,
  }}
/>

// FontAwesome 5 with solid variant
<Icon
  name="user-circle"
  type="font-awesome-5"
  solid
  size={24}
  color="#007AFF"
/>

/**
 * Compact chip/tag component for selections and filters
 * Extends ButtonProps but omits loading-related properties
 */
interface ChipProps extends Omit<ButtonProps, 'loading' | 'loadingStyle' | 'loadingProps'> {
  /** Button style variant */
  type?: 'solid' | 'outline';
}

import { Chip, Avatar } from 'react-native-elements';

// Basic chip
<Chip title="React Native" />

// Chip with icon
<Chip
  title="JavaScript"
  icon={{ name: 'code', type: 'material', color: '#fff' }}
  buttonStyle={{ backgroundColor: '#f39c12' }}
/>

// User chip with avatar
<Chip
  title="John Doe"
  avatar={<Avatar rounded title="JD" size="small" />}
/>

// Outline chip with close button
<Chip
  title="Removable"
  type="outline"
  icon={{ name: 'close', type: 'material' }}
  iconRight
  onPress={removeChip}
/>