react-native-wheel-picker

The DatePicker component provides a specialized wheel picker interface for selecting dates.

Simple Usage

Pass a date string in YYYY-MM-DD format and use onDateChanged to handle updates.

Customized Usage

You can customize the rendering of date components (Date, Month, Year) by providing custom render functions. The component uses a render prop pattern where you can access dateNodes to manually map and render the individual picker nodes.

// Simple Case
import React, {useState} from 'react';
import {DatePicker} from '@quidone/react-native-wheel-picker';

const App = () => {
  const [date, setDate] = useState('2025-02-02');

  return (
    <DatePicker
      date={date} // required format YYYY-MM-DD
      onDateChanged={({date}) => setDate(date)}
    />
  );
};

// Customized Case
import React, {useState} from 'react';
import {useStableCallback} from '@rozhkov/react-useful-hooks';
import {DatePicker} from '@quidone/react-native-wheel-picker';

const CustomizedDatePicker = () => {
  const [date, setDate] = useState('2025-02-02');

  const onDateChanged = useStableCallback(({date}: {date: string}) => {
    setDate(date);
  });

  return (
    <DatePicker
      date={date}
      onDateChanged={onDateChanged}
      renderDate={() => <DatePicker.Date />}
      renderMonth={() => <DatePicker.Month />}
      renderYear={() => <DatePicker.Year />}
    >
      {({dateNodes}) => {
        return dateNodes.map((x) => x.node);
      }}
    </DatePicker>
  );
};

When you need to coordinate multiple pickers (e.g., a range selector or a complex form), use the Picker Control API. This allows you to manage the state of several pickers through a single controller.

Workflow:

1. Wrap your WheelPicker with withPickerControl to create a ControlPicker component.
2. Initialize a controller using usePickerControl<T>(), where T is a map of your picker names to their respective item types.
3. Use useOnPickerValueChangedEffect to react to changes across the controlled pickers.
4. Use useOnPickerValueChangingEffect to intercept or react to values while they are in the process of changing.
5. Pass the control and a unique pickerName to each ControlPicker instance.

import React, {useState} from 'react';
import WheelPicker, {
  type PickerItem,
  useOnPickerValueChangedEffect,
  useOnPickerValueChangingEffect,
  usePickerControl,
  withPickerControl,
} from '@quidone/react-native-wheel-picker';
import {View} from 'react-native';

const ControlPicker = withPickerControl(WheelPicker);

type ControlPickersMap = {
  value1: {item: PickerItem<number>};
  value2: {item: PickerItem<number>};
};

const data = Array.from({length: 100}, (_, index) => ({value: index}));

const App = () => {
  const [value, setValue] = useState({value1: 0, value2: 0});

  const pickerControl = usePickerControl<ControlPickersMap>();

  useOnPickerValueChangedEffect(pickerControl, (event) => {
    setValue({
      value1: event.pickers.value1.item.value,
      value2: event.pickers.value2.item.value,
    });
  });

  useOnPickerValueChangingEffect(pickerControl, (event) => {
    // some logic
  });

  return (
    <View style={{flexDirection: 'row', justifyContent: 'space-around'}}>
      <ControlPicker
        control={pickerControl}
        pickerName={'value1'}
        data={data}
        value={value.value1}
        width={100}
        enableScrollByTapOnItem={true}
      />
      <ControlPicker
        control={pickerControl}
        pickerName={'value2'}
        data={data}
        value={value.value2}
        width={100}
        enableScrollByTapOnItem={true}
      />
    </View>
  );
};

The WheelPicker is a flexible component for creating wheel-style selection interfaces. It works without a native side, using native animations for performance.

Key props:

• data: An array of items to display. Each item should ideally have a value and label.
• value: The currently selected value.
• onValueChanged: Callback function triggered when the selection changes. It receives an object containing the selected item.
• enableScrollByTapOnItem: Boolean to allow scrolling to an item when it is tapped.

import React, {useState} from 'react';
import WheelPicker from '@quidone/react-native-wheel-picker';

const data = [...Array(100).keys()].map((index) => ({
  value: index,
  label: index.toString(),
}))

const App = () => {
  const [value, setValue] = useState(0);
  return (
    <WheelPicker
      data={data}
      value={value}
      onValueChanged={({item: {value}}) => setValue(value)}
      enableScrollByTapOnItem={true}
    />
  );
};

export default App;

Props

Note: DatePicker also accepts all common WheelPicker props like itemHeight, visibleItemCount, and readOnly.

Subcomponents

Use these for custom layouts:

• DatePicker.Date: Day WheelPicker
• DatePicker.Month: Month WheelPicker
• DatePicker.Year: Year WheelPicker