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
};