iOS Picker

/**
 * iOS-specific picker component with enhanced iOS features
 * Provides direct access to iOS native picker functionality
 */
interface PickerIOSProps extends ViewProps {
  /** Style to apply to each item label */
  itemStyle?: StyleProp<TextStyle>;
  /** Overall component styling */
  style?: StyleProp<TextStyle>;
  /** Change event with itemValue and itemIndex */
  onChange?: React.SyntheticEvent<{itemValue: ItemValue, itemIndex: number}>;
  /** Value change callback */
  onValueChange?: (itemValue: ItemValue, itemIndex: number) => void;
  /** Currently selected item value */
  selectedValue?: ItemValue;
  /** Testing identifier */
  testID?: string;
  /** Maximum lines for text truncation */
  numberOfLines?: number;
  /** iOS theme variant (light/dark) */
  themeVariant?: string;
}

declare class PickerIOS extends React.Component<PickerIOSProps, {}> {
  /** Reference to PickerIOSItem component */
  static Item: typeof PickerIOSItem;
}

interface PickerIOSItemProps {
  /** Display text for the item */
  label?: string;
  /** Value for the item */
  value?: number | string;
  /** Text color for the item */
  color?: string;
  /** Testing identifier */
  testID?: string;
}

declare class PickerIOSItem extends React.Component<PickerIOSItemProps, {}> {}

import React, { useState } from "react";
import { PickerIOS } from "@react-native-picker/picker";

// Basic iOS picker with theme support
function BasicIOSPicker() {
  const [selectedValue, setSelectedValue] = useState("option1");
  
  return (
    <PickerIOS
      selectedValue={selectedValue}
      onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
      themeVariant="dark"
      style={{ height: 216 }}
    >
      <PickerIOS.Item label="First Option" value="option1" />
      <PickerIOS.Item label="Second Option" value="option2" />
      <PickerIOS.Item label="Third Option" value="option3" />
    </PickerIOS>
  );
}

// iOS picker with custom item styling
function StyledIOSPicker() {
  const [selectedSize, setSelectedSize] = useState("medium");
  
  return (
    <PickerIOS
      selectedValue={selectedSize}
      onValueChange={setSelectedSize}
      itemStyle={{
        fontSize: 18,
        color: '#007AFF',
        fontWeight: '500'
      }}
      numberOfLines={2}
    >
      <PickerIOS.Item label="Small" value="small" color="#FF6B6B" />
      <PickerIOS.Item label="Medium" value="medium" color="#4ECDC4" />
      <PickerIOS.Item label="Large" value="large" color="#45B7D1" />
    </PickerIOS>
  );
}

// iOS picker with change event handling
function EventHandlingIOSPicker() {
  const [selectedCategory, setSelectedCategory] = useState("electronics");
  
  const handleChange = (event) => {
    console.log('Change event:', event.nativeEvent);
    setSelectedCategory(event.nativeEvent.itemValue);
  };
  
  const handleValueChange = (itemValue, itemIndex) => {
    console.log('Value changed:', itemValue, 'at index:', itemIndex);
    setSelectedCategory(itemValue);
  };
  
  return (
    <PickerIOS
      selectedValue={selectedCategory}
      onChange={handleChange}
      onValueChange={handleValueChange}
      testID="category-picker"
    >
      <PickerIOS.Item 
        label="Electronics" 
        value="electronics" 
        testID="electronics-item" 
      />
      <PickerIOS.Item 
        label="Clothing" 
        value="clothing" 
        testID="clothing-item" 
      />
      <PickerIOS.Item 
        label="Books" 
        value="books" 
        testID="books-item" 
      />
    </PickerIOS>
  );
}

/**
 * Style to apply to each individual item label
 * Accepts standard React Native text style properties
 */
itemStyle?: StyleProp<TextStyle>;

/**
 * iOS theme variant for automatic styling
 * Accepts 'light' or 'dark' for system appearance matching
 */
themeVariant?: string;

/**
 * Maximum number of lines for item text before truncation
 * Defaults to 1, increases height if set higher
 */
numberOfLines?: number;

/**
 * Native iOS change event providing detailed event information
 * Includes both itemValue and itemIndex in nativeEvent
 */
onChange?: React.SyntheticEvent<{
  itemValue: ItemValue, 
  itemIndex: number
}>;

/**
 * Individual item within PickerIOS component
 * Supports iOS-specific styling and color options
 */
interface PickerIOSItemProps {
  /** Display text shown in the picker */
  label?: string;
  /** Value associated with this item */
  value?: number | string;
  /** Text color for this specific item */
  color?: string;
  /** Testing identifier for this item */
  testID?: string;
}

declare class PickerIOSItem extends React.Component<PickerIOSItemProps, {}> {}