react-native-picky icon indicating copy to clipboard operation
react-native-picky copied to clipboard

Published 20 hours ago • verified publisher icon Liamandrew
→

Metadata

An awesome native wheel picker component for React Native.

⛏️ react-native-picky

An awesome native wheel picker component for react-native.

Features

  • Supports multiple columns ✅

  • Supports looping ✅

  • Native Android and iOS components for improved performance ✅

  • Typescript ✅

Preview

Preview iOS Android
Single Column
Multiple Columns with looping

Installation

yarn add react-native-picky

Quick Start

import { Picker, PickerColumn, PickerItem } from 'react-native-picky';

export const Demo = () => (
  <Picker>
    <PickerColumn>
      <PickerItem label="Monday" value="Monday" />
      <PickerItem label="Tuesday" value="Tuesday" />
      <PickerItem label="Wednesday" value="Wednesday" />
      <PickerItem label="Thursday" value="Thursday" />
      <PickerItem label="Friday" value="Friday" />
    </PickerColumn>
  </Picker>
);

Props

<Picker />

Property Type Description Platform Default
loop boolean Enable looping options iOS, Android false
style object View style prop iOS, Android
onChange function A callback function when a value is changed in any column iOS, Android
numberOfLines number The number of lines for each row in a column iOS 1
hasCurtain boolean Enable the curtain to highlight the selected value Android true
curtainColor string Color of the curtain Android hsla(0, 0%, 0%, 0.1)
hasIndicator boolean Enable the indicator to highlight the selected value Android true
indicatorColor string Color of the indicator Android hsla(0, 0%, 0%, 0.1)
indicatorSize number The size of the indicator Android 1
itemSpace number The amount of space between items Android 12
textColor string The color of the item text Android #000000
textSize number The size of the item text Android 20

<PickerColumn />

Property Type Description Platform Default
selectedValue string | number The selected value iOS, Android
onChange function A callback function if the value is changed in this column iOS, Android
width number The width of this column iOS, Android Takes up the available space

<PickerItem />

Property Type Description Platform Default
label string The label of the item iOS, Android
value string | number The value of the item iOS, Android
testID string The testID of the item iOS
color string The color of the item text iOS

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

← Metadata

46
Stars
9
Forks
Watchers

Owner

verified publisher icon Liamandrew

Metadata

An awesome native wheel picker component for React Native.

Back