@rn-components-kit/scroll-picker

ScrollPicker

English | 中文

Selecting option by scrolling operation. It supports following features:

• smoothing the differences between Android and iOS platforms
• multiple picker items
• cascading operation
• customized option content in ScrollPicker.Item

How to use

npm install @rn-components-kit/scroll-picker --save

Preview	Code
	Demo1 Code
	Demo2 Code
	Demo3 Code

Props

• style
• itemHeight
• onValueChange

Reference

Props

style

Allow you to customize style

Type	Required	Default
object	no	-

itemHeight

Height of each item in ScrollPicker.Item

Type	Required	Default
number	no	30

onValueChange

(value: {[key: string]: any}) => void;

A callback will be triggered when ScrollPicker.Item's selected value changes

Type	Required	Default
function	no	() => {}

Props for ScrollPicker.Item

• id
• flex
• data
• defaultValue
• renderItem

id

A unique identifier in ScrollPicker

Type	Required	Default
string	yes	-

flex

How much of the remaining space in the flex container

Type	Required	Default
number	no	1

data

Data source of options

Type	Required	Default
T[]	yes	-

defaultValue

Default value to speficy which option is selected initially (must be one of data)

Type	Required	Default
T	no	data[0]

renderItem

(params: {item: T, index: number}) => React.ReactElement;

Allows you to customize content style

Type	Required	Default
function	yes	-