react-native-cool-picker v1.0.4
react-native-cool-picker
Enhance your React Native applications with react-native-cool-picker, a customizable picker component designed to offer a smooth, iOS-style selection experience. Perfect for time, date, or any custom data selection, this picker integrates seamlessly with your React Native projects, providing a stylish and intuitive user interface component.
Installation
Install the package using Yarn or npm:
Yarn:
yarn add react-native-cool-picker
npm:
npm install react-native-cool-picker
Usage
Here's how to implement react-native-cool-picker in your React Native application:
import React from 'react';
import { View } from 'react-native';
import CoolPicker from "react-native-cool-picker";
const MyComponent = () => {
const minutesItems = Array.from({ length: 59 }, (_, i) => ({ label: `${i + 1} Minutes`, value: `${i + 1}` }));
const hoursItems = Array.from({ length: 24 }, (_, i) => ({ label: `${i + 1} Hours`, value: `${i + 1}` }));
return (
<View style={{ backgroundColor: 'rgb(98, 189, 167)' }}>
<CoolPicker
items={minutesItems}
numberOfItemsToShow={5}
initialSelectedIndex={21}
animateInitialSelectedIndex={false}
containerStyles={{ backgroundColor: 'transparent', width: 130 }}
highlightStyles={{ width: 100 }}
pickerItemHeight={24} />
</View>
);
};
export default MyComponent;
Props
Configure react-native-cool-picker using the following props for a tailored component experience:
| Prop | Type | Description | Example |
|---|---|---|---|
items | Array | Array of objects with label and value keys for picker items. | [ { label: '10 Minutes', value: '10' }, ... ] |
pickerItemHeight | Number | Height of each picker item. | 34 |
textStyles | Object | Styles for the picker item text. | { fontSize: 16 } |
containerStyles | Object | Styles for the picker container. | { backgroundColor: 'transparent', width: 130 } |
highlightStyles | Object | Styles for the highlighted item indicator. | { width: 100 } |
numberOfItemsToShow | Number | Number of items to display in the picker at once. Must be an odd number. | 5 |
initialSelectedIndex | Number | Index of the initially selected item. | 0 |
animateInitialSelectedIndex | Boolean | Whether to animate the picker to the initially selected item. | true |
onItemSelected | Function | Callback function triggered when an item is selected. Receives the selected item object. | (selectedItem) => console.log(selectedItem) |
Example Items Array
const items = [
{ label: '10 Minutes', value: '10' },
{ label: '20 Minutes', value: '20' },
{ label: '30 Minutes', value: '30' },
];Support
For support, issues, or contributions, please open an issue on GitHub. Contributions are always welcome!
License
react-native-cool-picker is MIT licensed. See LICENSE for details.
Star Us!
Found react-native-cool-picker helpful? Give us a star on GitHub to support the project!