or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core-picker.mdindex.mdios-picker.mdpicker-items.mdplatform-features.md
tile.json

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

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@react-native-picker/picker@2.11.x

To install, run

npx @tessl/cli install tessl/npm-react-native-picker--picker@2.11.0

index.mddocs/

React Native Picker

React Native Picker is a cross-platform picker component for React Native applications that provides dropdown/select interfaces on iOS, Android, macOS, and Windows platforms. It offers extensive customization options including item colors, fonts, selection colors, and platform-specific features like dialog/dropdown modes on Android and programmatic open/close functionality. The library maintains native performance through platform-specific implementations while providing a unified JavaScript interface.

Package Information

  • Package Name: @react-native-picker/picker
  • Package Type: npm
  • Language: JavaScript/TypeScript (React Native)
  • Installation: npm install @react-native-picker/picker

Core Imports

import { Picker, PickerIOS, PickerProps, PickerItemProps } from "@react-native-picker/picker";

For CommonJS:

const { Picker, PickerIOS, PickerProps, PickerItemProps } = require("@react-native-picker/picker");

Basic Usage

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

function App() {
  const [selectedLanguage, setSelectedLanguage] = useState("js");

  return (
    <Picker
      selectedValue={selectedLanguage}
      onValueChange={(itemValue, itemIndex) => 
        setSelectedLanguage(itemValue)
      }>
      <Picker.Item label="Java" value="java" />
      <Picker.Item label="JavaScript" value="js" />
      <Picker.Item label="Python" value="python" />
    </Picker>
  );
}

Architecture

React Native Picker is built around several key components:

  • Cross-Platform API: Unified Picker component that renders platform-appropriate implementations
  • Platform-Specific Implementations: Native iOS, Android, macOS, and Windows picker components
  • Item Components: Picker.Item for defining selectable options with styling support
  • TypeScript Integration: Full type safety with generic type support for values
  • React Native Bridge: Native module integration for optimal performance

Capabilities

Core Picker Component

Main cross-platform picker component that automatically renders the appropriate platform-specific implementation. Supports controlled component pattern with extensive customization options.

interface PickerProps<T = ItemValue> extends ViewProps {
  selectedValue?: T;
  onValueChange?: (itemValue: T, itemIndex: number) => void;
  style?: StyleProp<TextStyle>;
  enabled?: boolean;
  mode?: 'dialog' | 'dropdown';
  itemStyle?: StyleProp<TextStyle>;
  selectionColor?: ColorValue;
  prompt?: string;
  placeholder?: string;
  testID?: string;
  dropdownIconColor?: number | ColorValue;
  dropdownIconRippleColor?: number | ColorValue;
  numberOfLines?: number;
  accessibilityLabel?: string;
  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
}

declare class Picker<T> extends React.Component<PickerProps<T>, {}> {
  static readonly MODE_DIALOG: 'dialog';
  static readonly MODE_DROPDOWN: 'dropdown';
  static Item: React.ComponentType<PickerItemProps<T>>;
  focus: () => void;
  blur: () => void;
}

Core Picker

Picker Items

Individual selectable items within a Picker component. Support styling, colors, fonts, and platform-specific features like disabled state.

interface PickerItemProps<T = ItemValue> {
  label?: string;
  value?: T;
  color?: string;
  fontFamily?: string;
  testID?: string;
  style?: StyleProp<TextStyle>;
  enabled?: boolean;
}

Picker Items

iOS-Specific Picker

Enhanced picker component with iOS-specific features including theme variants, selection colors, and native iOS styling patterns.

interface PickerIOSProps extends ViewProps {
  itemStyle?: StyleProp<TextStyle>;
  style?: StyleProp<TextStyle>;
  onChange?: React.SyntheticEvent<{itemValue: ItemValue, itemIndex: number}>;
  onValueChange?: (itemValue: ItemValue, itemIndex: number) => void;
  selectedValue?: ItemValue;
  testID?: string;
  numberOfLines?: number;
  themeVariant?: string;
}

declare class PickerIOS extends React.Component<PickerIOSProps, {}> {
  static Item: typeof PickerIOSItem;
}

iOS Picker

Platform-Specific Features

Platform-specific customization options and behaviors including Android dialog/dropdown modes, Windows placeholder support, and programmatic control methods.

// Android-specific props
interface AndroidPickerProps {
  mode?: 'dialog' | 'dropdown';
  enabled?: boolean;
  prompt?: string;
  dropdownIconColor?: ColorValue;
  dropdownIconRippleColor?: ColorValue;
  numberOfLines?: number;
  onFocus?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
  onBlur?: (e: NativeSyntheticEvent<TargetedEvent>) => void;
}

// Windows-specific props
interface WindowsPickerProps {
  placeholder?: string;
}

// iOS-specific props
interface IOSPickerProps {
  itemStyle?: StyleProp<TextStyle>;
  selectionColor?: ColorValue;
  themeVariant?: string;
}

Platform Features

Types

type ItemValue = number | string | object;

interface PickerIOSItemProps {
  label?: string;
  value?: number | string;
  color?: string;
  testID?: string;
}