Core Picker Component

/**
 * Cross-platform picker component for React Native
 * Automatically renders platform-appropriate implementation
 */
declare class Picker<T = ItemValue> extends React.Component<PickerProps<T>, {}> {
  /** Android dialog display mode constant */
  static readonly MODE_DIALOG: 'dialog';
  /** Android dropdown display mode constant */
  static readonly MODE_DROPDOWN: 'dropdown';
  /** Reference to PickerItem component */
  static Item: React.ComponentType<PickerItemProps<T>>;
  
  /** Programmatically opens picker (Android only) */
  focus: () => void;
  /** Programmatically closes picker (Android only) */
  blur: () => void;
}

interface PickerProps<T = ItemValue> extends ViewProps {
  /** Currently selected value matching an item's value */
  selectedValue?: T;
  /** Callback when an item is selected */
  onValueChange?: (itemValue: T, itemIndex: number) => void;
  /** Component styling */
  style?: StyleProp<TextStyle>;
  /** Enable/disable picker interaction (Android, Web, Windows) */
  enabled?: boolean;
  /** Display mode for Android picker */
  mode?: 'dialog' | 'dropdown';
  /** Style for individual item labels (iOS, Windows) */
  itemStyle?: StyleProp<TextStyle>;
  /** Selection indicator color (iOS) */
  selectionColor?: ColorValue;
  /** Dialog title text (Android) */
  prompt?: string;
  /** Placeholder text when no item selected (Windows) */
  placeholder?: string;
  /** Testing identifier */
  testID?: string;
  /** Dropdown arrow color (Android) */
  dropdownIconColor?: number | ColorValue;
  /** Dropdown arrow ripple color (Android) */
  dropdownIconRippleColor?: number | ColorValue;
  /** Maximum lines for text truncation (Android, iOS) */
  numberOfLines?: number;
  /** Accessibility label for screen readers */
  accessibilityLabel?: string;
  /** Focus event handler (Android) */
  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
  /** Blur event handler (Android) */
  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
}

type ItemValue = number | string | object;

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

// Basic controlled picker
function BasicPicker() {
  const [selectedValue, setSelectedValue] = useState("key1");
  
  return (
    <Picker
      selectedValue={selectedValue}
      onValueChange={(itemValue, itemIndex) => setSelectedValue(itemValue)}
    >
      <Picker.Item label="Option 1" value="key1" />
      <Picker.Item label="Option 2" value="key2" />
    </Picker>
  );
}

// Android dropdown mode with styling
function AndroidDropdown() {
  const [value, setValue] = useState("option1");
  
  return (
    <Picker
      selectedValue={value}
      onValueChange={setValue}
      mode="dropdown"
      enabled={true}
      prompt="Select an option"
      dropdownIconColor="#FF6B6B"
      numberOfLines={2}
    >
      <Picker.Item label="First Option" value="option1" />
      <Picker.Item label="Second Option" value="option2" />
    </Picker>
  );
}

// Programmatic control (Android)
function ControlledPicker() {
  const pickerRef = useRef<Picker>(null);
  const [value, setValue] = useState("default");
  
  const openPicker = () => pickerRef.current?.focus();
  const closePicker = () => pickerRef.current?.blur();
  
  return (
    <>
      <Picker
        ref={pickerRef}
        selectedValue={value}
        onValueChange={setValue}
        onFocus={() => console.log("Picker opened")}
        onBlur={() => console.log("Picker closed")}
      >
        <Picker.Item label="Default" value="default" />
        <Picker.Item label="Other" value="other" />
      </Picker>
      <Button title="Open Picker" onPress={openPicker} />
    </>
  );
}

/**
 * Value change callback with selected item information
 * @param itemValue - The value prop of the selected item
 * @param itemIndex - Zero-based index of selected item
 */
onValueChange?: (itemValue: T, itemIndex: number) => void;

/**
 * Focus event fired when picker becomes active (Android only)
 * @param event - Native synthetic event with target information
 */
onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

/**
 * Blur event fired when picker loses focus (Android only)
 * @param event - Native synthetic event with target information
 */
onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;

/** Display picker items in a modal dialog (Android default) */
static readonly MODE_DIALOG: 'dialog';

/** Display picker items in a dropdown anchored to picker view (Android) */
static readonly MODE_DROPDOWN: 'dropdown';

/**
 * Programmatically opens the picker interface
 * Available on Android platform only
 */
focus(): void;

/**
 * Programmatically closes the picker interface
 * Available on Android platform only
 */
blur(): void;