Picker

The <Picker />component gives your a easy-to-use cross platform date picker leveraging a custom implementation on Android using a FlatList and PickerIOS on iOS using an unified API based on the iOS implementation.

Preview

iOS	Android

Sources

You can check the source code directly on GitHub.

Usage

Basic example

// MyComponent.jsx

import React from 'react';
import {Picker} from 'react-native-propel-kit';

const MyComponent = () => {
  const [value, setValue] = useState();
  // @NOTE we drop the second arg, to prevent setState warnings
  const handleValueChange = useCallback((nextValue: string) => {
    setValue(nextValue);
  }, []);
  return (
    <Picker selectedValue={value} onValueChange={handleValueChange} style={defaultStyle}>
      {NATIONALITY_SELECT_ITEMS.map(option => (
        <Picker.Item key={option.value} {...option} />
      ))}
    </Picker>
  );
};

export default MyComponent;

Props

export type Props = PickerProps & {
  itemHeight?: number;
  itemVisibleCount?: number;
};

Defaults

export const defaultProps = {
  itemHeight: 50,
  itemVisibleCount: 5.5
};