react-native-any-picker

Customizable, iOS-style scroll pickers for React Native with support for select, date, time, and datetime picking. Built with TypeScript and powered by moment.js for robust date/time handling.

Features

✨ Four Picker Types: SelectPicker, DatePicker, TimePicker, and DateTimePicker
🎨 Fully Customizable: Theme colors, fonts, and styling options
📅 Flexible Date Formatting: Use moment.js format strings like "DD/MMM/YYYY", "MMM/DD/YYYY", etc
🌍 Internationalization: Custom month names, AM/PM labels, and locale support
⚙️ TypeScript: Full type definitions included
📱 Cross-Platform: Works seamlessly on iOS and Android
⚡ Performant: Built on @shopify/flash-list for smooth scrolling

Installation

npm install react-native-any-picker moment @shopify/flash-list

or

yarn add react-native-any-picker moment @shopify/flash-list

Peer Dependencies

This package requires the following peer dependencies:

• react >= 16.8.0
• react-native >= 0.60.0
• @shopify/flash-list >= 1.0.0
• moment >= 2.29.0

Quick Start

import { DateTimePicker } from 'react-native-any-picker';

function MyComponent() {
  const [selectedDate, setSelectedDate] = useState(new Date());

  return (
    <DateTimePicker
      value={selectedDate}
      onChange={setSelectedDate}
      format="DD/MMM/YYYY"
      timeFormat="12"
    />
  );
}

Components

SelectPicker

Generic picker for selecting from a list of items.

import { SelectPicker } from 'react-native-any-picker';

const items = [
  { label: 'Apple', value: 'apple' },
  { label: 'Banana', value: 'banana' },
  { label: 'Orange', value: 'orange' },
];

<SelectPicker
  items={items}
  value={selectedValue}
  onChange={setSelectedValue}
  placeholder="Select a fruit"
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | items | Array<{label: string, value: T}> | Required | Array of items to select from | | value | T | Required | Currently selected value | | onChange | (value: T) => void | Required | Callback when value changes | | placeholder | string | undefined | Placeholder text when no value selected | | theme | ThemeConfig | undefined | Custom theme configuration | | style | ViewStyle | undefined | Container style |

DatePicker

Date selection with customizable column format.

import { DatePicker } from 'react-native-any-picker';

// US Format (Month/Day/Year)
<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  format="MMM/DD/YYYY"
  minimumDate={new Date(2000, 0, 1)}
  maximumDate={new Date()}
/>

// European Format (Day/Month/Year)
<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  format="DD/MMM/YYYY"
/>

// Numeric Format (Day/Month/Year)
<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  format="DD/MM/YYYY"
/>

// Asian Format (Year/Month/Day)
<DatePicker
  value={selectedDate}
  onChange={setSelectedDate}
  format="YYYY/MM/DD"
/>

Format Tokens:

• Day: DD (01-31 with leading zero), D (1-31)
• Month:
  • M (1-12 single digit)
  • MM (01-12 with leading zero)
  • MMM (Jan-Dec abbreviated)
  • MMMM (January-December full names)
• Year: YYYY (2024), YY (24)

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | Date | Required | Currently selected date | | onChange | (date: Date) => void | Required | Callback when date changes | | format | string | "MMM/DD/YYYY" | Date format string (moment.js tokens) | | minimumDate | Date | undefined | Minimum selectable date | | maximumDate | Date | undefined | Maximum selectable date | | locale | string | "en" | Locale for date formatting | | texts | {months?: string[]} | undefined | Custom month names | | columnWidths | {month?: number, day?: number, year?: number} | undefined | Manual column width overrides | | theme | ThemeConfig | undefined | Custom theme configuration | | style | ViewStyle | undefined | Container style |

TimePicker

Time selection with 12-hour or 24-hour format.

import { TimePicker } from 'react-native-any-picker';

// 12-Hour Format
<TimePicker
  value={selectedTime}
  onChange={setSelectedTime}
  timeFormat="12"
  minuteInterval={5}
/>

// 24-Hour Format
<TimePicker
  value={selectedTime}
  onChange={setSelectedTime}
  timeFormat="24"
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | Date | Required | Currently selected time | | onChange | (date: Date) => void | Required | Callback when time changes | | timeFormat | '12' \| '24' | '12' | Time display format | | minuteInterval | number | 1 | Minute step interval (e.g., 5, 15, 30) | | texts | {am?: string, pm?: string} | {am: 'AM', pm: 'PM'} | Custom AM/PM labels | | columnWidths | {hour?: number, minute?: number, ampm?: number} | undefined | Manual column width overrides | | theme | ThemeConfig | undefined | Custom theme configuration | | style | ViewStyle | undefined | Container style |

DateTimePicker

Combined date and time selection with 1 date column + 2-3 time columns.

Layout:

• Column 1: Full formatted date (e.g., "Dec / 25 / 2024")
• Column 2: Hour
• Column 3: Minute
• Column 4 (optional): AM/PM (for 12-hour format)

import { DateTimePicker } from 'react-native-any-picker';

<DateTimePicker
  value={selectedDateTime}
  onChange={setSelectedDateTime}
  format="DD/MMM/YYYY"
  timeFormat="12"
  minimumDate={new Date(2000, 0, 1)}
  maximumDate={new Date()}
  minuteInterval={5}
/>

Props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | value | Date | Required | Currently selected date and time | | onChange | (date: Date) => void | Required | Callback when date/time changes | | format | string | "MMM/DD/YYYY" | Date format string (moment.js tokens) | | timeFormat | '12' \| '24' | '12' | Time display format | | minimumDate | Date | undefined | Minimum selectable date | | maximumDate | Date | undefined | Maximum selectable date | | minuteInterval | number | 1 | Minute step interval | | locale | string | "en" | Locale for date formatting | | texts | {months?: string[], am?: string, pm?: string} | undefined | Custom labels | | columnWidths | {date?: number, hour?: number, minute?: number, ampm?: number} | undefined | Manual column width overrides | | theme | ThemeConfig | undefined | Custom theme configuration | | style | ViewStyle | undefined | Container style |

Theme Customization

All pickers support custom theming:

const customTheme = {
  colors: {
    text: '#333333',
    border: '#E0E0E0',
    indicator: '#007AFF20',
    background: '#FFFFFF',
  },
  fonts: {
    size: {
      xl: 18,
      lg: 15,
      base: 13,
      sm: 11,
    },
    family: 'System',
  },
};

<DatePicker
  value={date}
  onChange={setDate}
  theme={customTheme}
/>

Theme Configuration:

interface ThemeConfig {
  colors?: {
    text?: string;         // Text color
    border?: string;       // Border color
    indicator?: string;    // Selection indicator background
    background?: string;   // Picker background
  };
  fonts?: {
    size?: {
      xl?: number;         // Largest text (selected item)
      lg?: number;         // Large text
      base?: number;       // Base text size
      sm?: number;         // Small text
    };
    family?: string;       // Font family
  };
}

Modal & BottomSheet Wrappers

For easier integration, use the pre-built modal wrappers:

import { PickerModal, PickerBottomSheet } from 'react-native-any-picker';

function MyComponent() {
  const [showModal, setShowModal] = useState(false);
  const [date, setDate] = useState(new Date());
  
  return (
    <>
      <Button title="Show Picker" onPress={() => setShowModal(true)} />
      
      {/* Full-screen Modal */}
      <PickerModal
        visible={showModal}
        onClose={() => setShowModal(false)}
        pickerType="datetime"
        pickerProps={{
          value: date,
          onChange: setDate,
          format: "DD/MMM/YYYY",
          timeFormat: "12"
        }}
        header={{
          title: "Select Date & Time"
        }}
      />
      
      {/* Bottom Sheet */}
      <PickerBottomSheet
        visible={showModal}
        onClose={() => setShowModal(false)}
        pickerType="date"
        pickerProps={{
          value: date,
          onChange: setDate
        }}
        header={{
          showHandle: true
        }}
      />
    </>
  );
}

Modular Imports

You can import pickers individually for better tree-shaking:

// Import specific pickers
import { SelectPicker } from 'react-native-any-picker/select';
import { DatePicker } from 'react-native-any-picker/date';
import { TimePicker } from 'react-native-any-picker/time';
import { DateTimePicker } from 'react-native-any-picker/datetime';

Internationalization

Custom Month Names

const vietnameseMonths = [
  'Tháng 1', 'Tháng 2', 'Tháng 3', 'Tháng 4',
  'Tháng 5', 'Tháng 6', 'Tháng 7', 'Tháng 8',
  'Tháng 9', 'Tháng 10', 'Tháng 11', 'Tháng 12',
];

<DatePicker
  value={date}
  onChange={setDate}
  texts={{ months: vietnameseMonths }}
/>

Custom AM/PM Labels

<TimePicker
  value={time}
  onChange={setTime}
  texts={{ am: 'SA', pm: 'CH' }}
/>

Complete Example

import React, { useState } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Modal } from 'react-native';
import { DateTimePicker } from 'react-native-any-picker';

export default function App() {
  const [selectedDateTime, setSelectedDateTime] = useState(new Date());
  const [showPicker, setShowPicker] = useState(false);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={() => setShowPicker(true)}
      >
        <Text>Select Date & Time</Text>
        <Text>{selectedDateTime.toLocaleString()}</Text>
      </TouchableOpacity>

      <Modal
        visible={showPicker}
        transparent
        animationType="slide"
        onRequestClose={() => setShowPicker(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <TouchableOpacity onPress={() => setShowPicker(false)}>
                <Text style={styles.headerButton}>Cancel</Text>
              </TouchableOpacity>
              <Text style={styles.headerTitle}>Select Date & Time</Text>
              <TouchableOpacity onPress={() => setShowPicker(false)}>
                <Text style={[styles.headerButton, styles.doneButton]}>
                  Done
                </Text>
              </TouchableOpacity>
            </View>
            <DateTimePicker
              value={selectedDateTime}
              onChange={setSelectedDateTime}
              format="DD/MMM/YYYY"
              timeFormat="12"
              style={styles.picker}
            />
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#E0E0E0',
  },
  headerButton: {
    fontSize: 16,
    color: '#666666',
  },
  doneButton: {
    color: '#007AFF',
    fontWeight: '600',
  },
  headerTitle: {
    fontSize: 17,
    fontWeight: '600',
  },
  picker: {
    height: 250,
  },
});

TypeScript

This package is written in TypeScript and includes full type definitions. All pickers are fully typed, providing excellent IDE support and type safety.

import { DatePickerProps, TimePickerProps, DateTimePickerProps } from 'react-native-any-picker';

License

MIT

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

GitHub Repository

Support

If you encounter any issues or have questions:

• 📝 File an issue on GitHub
• ⭐ Star the repository if you find it useful!