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

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

—

Pending

Overview

Eval results

Files

Platform-Specific Features

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

Cross-platform customization options and behaviors specific to iOS, Android, Windows, and macOS platforms. Each platform provides unique features that enhance the native user experience while maintaining API consistency.

Capabilities

Android Platform Features

Android-specific props and behaviors for enhanced Android user experience.

/**
 * Android-specific picker properties
 * Provides native Android picker customization
 */
interface AndroidPickerProps {
  /** Display mode: 'dialog' (modal) or 'dropdown' (anchored) */
  mode?: 'dialog' | 'dropdown';
  /** Enable/disable picker interaction */
  enabled?: boolean;
  /** Dialog title text when mode is 'dialog' */
  prompt?: string;
  /** Dropdown arrow color */
  dropdownIconColor?: ColorValue;
  /** Dropdown arrow ripple effect color */
  dropdownIconRippleColor?: ColorValue;
  /** Maximum lines before text truncation */
  numberOfLines?: number;
  /** Focus event when picker opens */
  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
  /** Blur event when picker closes */
  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
}

/** Android dialog mode constant */
static readonly MODE_DIALOG: 'dialog';
/** Android dropdown mode constant */
static readonly MODE_DROPDOWN: 'dropdown';

Android Usage Examples:

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

// Dialog mode picker (default)
<Picker
  selectedValue={selectedValue}
  onValueChange={setSelectedValue}
  mode="dialog"
  prompt="Choose an option"
  enabled={true}
>
  <Picker.Item label="Option 1" value="opt1" />
  <Picker.Item label="Option 2" value="opt2" />
</Picker>

// Dropdown mode with custom styling
<Picker
  selectedValue={selectedValue}
  onValueChange={setSelectedValue}
  mode="dropdown"
  dropdownIconColor="#FF5722"
  dropdownIconRippleColor="#FF9800"
  numberOfLines={3}
  onFocus={() => console.log('Picker opened')}
  onBlur={() => console.log('Picker closed')}
>
  <Picker.Item 
    label="Long text that might wrap to multiple lines" 
    value="long" 
  />
  <Picker.Item label="Short" value="short" />
</Picker>

// Programmatic control
const pickerRef = useRef();
const openPicker = () => pickerRef.current?.focus();
const closePicker = () => pickerRef.current?.blur();

<Picker ref={pickerRef} selectedValue={value} onValueChange={setValue}>
  <Picker.Item label="Control Me" value="controlled" />
</Picker>

iOS Platform Features

iOS-specific props and behaviors for native iOS picker experience.

/**
 * iOS-specific picker properties
 * Provides native iOS picker customization
 */
interface IOSPickerProps {
  /** Style applied to each item label */
  itemStyle?: StyleProp<TextStyle>;
  /** Selection indicator color */
  selectionColor?: ColorValue;
  /** iOS theme variant (light/dark) */
  themeVariant?: string;
  /** Maximum lines for item text */
  numberOfLines?: number;
}

iOS Usage Examples:

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

// iOS picker with custom styling
<Picker
  selectedValue={selectedValue}
  onValueChange={setSelectedValue}
  itemStyle={{
    fontSize: 18,
    color: '#007AFF',
    fontWeight: '500'
  }}
  selectionColor="#007AFF"
  numberOfLines={2}
>
  <Picker.Item label="iOS Option 1" value="ios1" />
  <Picker.Item label="iOS Option 2" value="ios2" />
</Picker>

// Dark theme iOS picker
<Picker
  selectedValue={selectedValue}
  onValueChange={setSelectedValue}
  themeVariant="dark"
  itemStyle={{
    fontSize: 16,
    color: '#FFFFFF'
  }}
>
  <Picker.Item label="Dark Option 1" value="dark1" />
  <Picker.Item label="Dark Option 2" value="dark2" />
</Picker>

Windows Platform Features

Windows-specific props and behaviors for native Windows picker experience.

/**
 * Windows-specific picker properties
 * Provides native Windows picker customization
 */
interface WindowsPickerProps {
  /** Placeholder text when no item is selected */
  placeholder?: string;
  /** Style applied to item labels */
  itemStyle?: StyleProp<TextStyle>;
  /** Enable/disable picker interaction */
  enabled?: boolean;
}

Windows Usage Examples:

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

// Windows picker with placeholder
<Picker
  selectedValue={selectedValue}
  onValueChange={setSelectedValue}
  placeholder="Select an option..."
  enabled={true}
  itemStyle={{
    fontSize: 14,
    fontFamily: 'Segoe UI'
  }}
>
  <Picker.Item label="Windows Option 1" value="win1" />
  <Picker.Item label="Windows Option 2" value="win2" />
</Picker>

macOS Platform Features

macOS-specific behaviors that follow macOS design patterns.

/**
 * macOS-specific picker properties
 * Follows macOS Human Interface Guidelines
 */
interface MacOSPickerProps {
  /** Style applied to item labels */
  itemStyle?: StyleProp<TextStyle>;
  /** Maximum lines for item text */
  numberOfLines?: number;
}

macOS Usage Examples:

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

// macOS picker with native styling
<Picker
  selectedValue={selectedValue}
  onValueChange={setSelectedValue}
  itemStyle={{
    fontSize: 13,
    fontFamily: 'SF Pro Text'
  }}
  numberOfLines={1}
>
  <Picker.Item label="macOS Option 1" value="mac1" />
  <Picker.Item label="macOS Option 2" value="mac2" />
</Picker>

Platform Detection and Conditional Rendering

Implementing platform-specific behavior in your components.

/**
 * Platform-specific picker implementation
 * Conditionally applies platform-appropriate props
 */
import { Platform } from 'react-native';
import { Picker } from '@react-native-picker/picker';

const PlatformPicker = ({ selectedValue, onValueChange, children }) => {
  const platformProps = {
    // Common props
    selectedValue,
    onValueChange,
    
    // Platform-specific props
    ...(Platform.OS === 'android' && {
      mode: 'dropdown',
      dropdownIconColor: '#007AFF'
    }),
    ...(Platform.OS === 'ios' && {
      itemStyle: { fontSize: 16 },
      selectionColor: '#007AFF'
    }),
    ...(Platform.OS === 'windows' && {
      placeholder: 'Select...'
    })
  };
  
  return <Picker {...platformProps}>{children}</Picker>;
};

RTL (Right-to-Left) Support

Configuration for RTL language support across platforms.

/**
 * RTL support configuration
 * Requires Android manifest configuration
 */
// Android: Add to AndroidManifest.xml
// <application android:supportsRtl="true">

// Usage remains the same across platforms
<Picker
  selectedValue={selectedValue}
  onValueChange={setSelectedValue}
>
  <Picker.Item label="العربية" value="ar" />
  <Picker.Item label="עברית" value="he" />
</Picker>

Accessibility Features

Platform-specific accessibility support and configuration.

/**
 * Accessibility properties across platforms
 * Provides screen reader and accessibility support
 */
<Picker
  selectedValue={selectedValue}
  onValueChange={setSelectedValue}
  accessibilityLabel="Language Selection Picker"
  testID="language-picker"
>
  <Picker.Item 
    label="English" 
    value="en" 
    testID="english-option"
  />
  <Picker.Item 
    label="Spanish" 
    value="es" 
    testID="spanish-option"
  />
</Picker>

Installation and Setup

Platform-specific installation and configuration requirements.

iOS Setup:

# CocoaPods integration required
cd ios && pod install

Android Setup:

# Autolinking handles integration automatically
# Manual configuration only for RN < 0.60

Windows Setup:

# Manual project references required for some versions
# See Windows-specific installation documentation

macOS Setup:

# CocoaPods integration required
cd macos && pod install

Install with Tessl CLI

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

docs