tessl/npm-react-native-picker--picker

React Native Picker for iOS, Android, macOS, and Windows

—

Pending

Overview

Eval results

Files

Picker Items

Name: tessl/npm-react-native-picker--picker
Author: tessl

Individual selectable items within a Picker component. Each item represents a choice that users can select, with support for custom styling, colors, fonts, and platform-specific features.

Capabilities

PickerItem Component

Individual selectable items that are children of a Picker component. The render method throws null as items are processed by the parent Picker.

/**
 * Individual selectable item in a Picker component
 * Items are processed by parent Picker, render method throws null
 */
interface PickerItemProps<T = ItemValue> {
  /** Display text shown to the user */
  label?: string;
  /** Value passed to onValueChange when selected */
  value?: T;
  /** Text color for this item (Android) */
  color?: string;
  /** Font family for this item (Android) */
  fontFamily?: string;
  /** Testing identifier for this item */
  testID?: string;
  /** Style object for this item (Android) */
  style?: StyleProp<TextStyle>;
  /** Whether this item can be selected (Android, Web) */
  enabled?: boolean;
  /** Content description for accessibility (Android) */
  contentDescription?: string;
}

/**
 * Picker item component class
 * Render method throws null as items are processed by parent
 */
class PickerItem extends React.Component<PickerItemProps> {
  render(): React.Node; // throws null
}

Usage Examples:

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

// Basic items with labels and values
<Picker selectedValue={selectedLanguage} onValueChange={setSelectedLanguage}>
  <Picker.Item label="Java" value="java" />
  <Picker.Item label="JavaScript" value="js" />
  <Picker.Item label="Python" value="python" />
  <Picker.Item label="TypeScript" value="ts" />
</Picker>

// Items with custom colors (Android)
<Picker selectedValue={selectedColor} onValueChange={setSelectedColor}>
  <Picker.Item label="Red" value="red" color="#FF0000" />
  <Picker.Item label="Green" value="green" color="#00FF00" />
  <Picker.Item label="Blue" value="blue" color="#0000FF" />
</Picker>

// Items with custom styling (Android)
<Picker selectedValue={selectedFont} onValueChange={setSelectedFont}>
  <Picker.Item 
    label="Arial" 
    value="arial" 
    style={{
      backgroundColor: 'cyan',
      fontSize: 18,
      fontFamily: 'Arial'
    }}
  />
  <Picker.Item 
    label="Times New Roman" 
    value="times" 
    style={{
      backgroundColor: 'lightblue',
      fontSize: 16,
      fontFamily: 'serif'
    }}
  />
</Picker>

// Items with enabled/disabled states (Android, Web)
<Picker selectedValue={selectedOption} onValueChange={setSelectedOption}>
  <Picker.Item label="Available Option" value="available" enabled={true} />
  <Picker.Item label="Disabled Option" value="disabled" enabled={false} />
  <Picker.Item label="Default (Enabled)" value="default" />
</Picker>

// Items with test identifiers
<Picker selectedValue={selectedTest} onValueChange={setSelectedTest}>
  <Picker.Item 
    label="Test Option 1" 
    value="test1" 
    testID="picker-item-test1" 
  />
  <Picker.Item 
    label="Test Option 2" 
    value="test2" 
    testID="picker-item-test2" 
  />
</Picker>

Item Properties

Detailed breakdown of individual item properties and their platform support.

/**
 * Display text shown to the user in the picker
 * Required for meaningful user interface
 */
label?: string;

/**
 * Value passed to onValueChange callback when this item is selected
 * Can be string, number, or complex object
 */
value?: T;

/**
 * Text color for this specific item
 * Supported on Android platform only
 * Accepts standard React Native color values
 */
color?: string;

/**
 * Font family for this specific item  
 * Supported on Android platform only
 * Font file (.ttf) should be in assets/fonts directory
 */
fontFamily?: string;

/**
 * Testing identifier for end-to-end testing
 * Supported across all platforms
 */
testID?: string;

/**
 * Style object for individual item customization
 * Supported on Android platform only
 * Limited to: color, backgroundColor, fontSize, fontFamily
 */
style?: StyleProp<TextStyle>;

/**
 * Whether this item can be selected by the user
 * Defaults to true if not specified
 * Supported on Android and Web platforms
 */
enabled?: boolean;

/**
 * Content description for accessibility features
 * Used by screen readers and accessibility services
 * Supported on Android platform only
 */
contentDescription?: string;

Platform-Specific Item Features

Different platforms support different item customization options.

Android Item Features:

Custom colors via color prop
Font family selection via fontFamily prop
Style objects with limited properties
Individual item enable/disable via enabled prop
Background colors via style object
Accessibility support via contentDescription prop

iOS Item Features:

Items inherit styling from parent Picker's itemStyle
Limited individual customization
Focus on native iOS appearance

Windows Item Features:

Basic label and value support
Inherits styling from parent Picker
Native Windows appearance

Web Item Features:

Renders as HTML <option> elements
Support for enabled prop (becomes disabled attribute)
Basic styling through parent component

Value Types

Items support flexible value types for different use cases.

type ItemValue = number | string | object;

// String values
<Picker.Item label="Option A" value="option-a" />

// Numeric values  
<Picker.Item label="Priority 1" value={1} />

// Object values for complex data
<Picker.Item 
  label="John Doe" 
  value={{id: 123, name: "John Doe", email: "john@example.com"}} 
/>

// Boolean values
<Picker.Item label="Enabled" value={true} />
<Picker.Item label="Disabled" value={false} />

Install with Tessl CLI

npx tessl i tessl/npm-react-native-picker--picker

docs