react-native-slot-picker

This component is used to display a scrollable slot / wheel picker in React Native. It supports disabled slots, auto selection of nearest enabled slot and custom colors.

Usage

import React from 'react';
import { View } from 'react-native';
import { SlotPicker } from 'react-native-slot-picker';

const slots = [
  {
    label: '17 Dec 2025, 03:30 PM',
    value: '2025-12-17T10:00:00.000Z',
    disabled: true,
    isPadding: true,
  },
  {
    label: '17 Dec 2025, 03:45 PM',
    value: '2025-12-17T10:15:00.000Z',
    disabled: true,
    isPadding: true,
  },
  {
    label: '17 Dec 2025, 04:00 PM',
    value: '2025-12-17T10:30:00.000Z',
    disabled: true,
    isPadding: true,
  },
  {
    label: '17 Dec 2025, 04:15 PM',
    value: '2025-12-17T10:45:00.000Z',
    disabled: false,
  },
  {
    label: '17 Dec 2025, 04:30 PM',
    value: '2025-12-17T11:00:00.000Z',
    disabled: false,
  },
  {
    label: '17 Dec 2025, 04:45 PM',
    value: '2025-12-17T11:15:00.000Z',
    disabled: false,
  },
];

export default function Example() {
  return (
    <View>
      <SlotPicker
        slots={slots}
        onSelect={(item) => {
          console.log(item.label);
          console.log(item.value);
          console.log(item.disabled);
        }}
        colors={{
          text: '#333333',
          disabledText: '#AAAAAA',
          selectedText: '#000000',
          indicator: '#9A45D8',
        }}
      />
    </View>
  );
}