YearPicker

The <YearPicker /> component gives you easy-to-use cross platform year picker leveraging this library Select using an unified API.

• Integrates well in forms as a themable TextInput-like button
• Properly unified API and casted results.
• Supports an UTC-mode for tz-proofing the data.

Preview

iOS	Android

Sources

You can check the source code directly on GitHub.

Usage

Setup dependencies

Since this components uses a backdrop, you need to wrap your application with a <BackdropProvider /> component. You usually want to wrap it as high as possible in your tree so that the backdrop properly covers the whole screen.

// App.jsx

import React from 'react';
import BackdropProvider from '@mgcrea/react-native-backdrop-provider';

const App: FunctionComponent = () => {
  return (
    <BackdropProvider>
      <RootNavigator />
    </BackdropProvider>
  );
};

export default App;

Basic example

The basic API is relatively close to a regular TextInput

// MyComponent.jsx

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

const MyComponent = () => {
  const [year, setYear] = useState<number>(2019);
  return (
    <>
      <Text style={{color: 'white', marginBottom: 12}}>Value: {year}</Text>
      <YearPicker title="Pick a year" value={year} onChange={setYear} />
    </>
  );
};

export default MyComponent;

Props

export type Props = SelectProps & {
  onChange?: (value: number) => void;
  labelExtractor?: (value: number, options: LabelExtractorOptions) => string;
  minValue?: number;
  maxValue?: number;
  locale?: string;
};

Defaults

export const defaultProps = {
  initialValue: CURRENT_YEAR,
  InputButtonComponent: InputButton,
  labelExtractor: (value: number) => `${value}`,
  locale: navigator.language,
  minValue: CURRENT_YEAR - 50,
  maxValue: CURRENT_YEAR + 20
};