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

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

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

React Native Picker

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

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;
}