roll-picker-native

An alternative to ScrollView on React Native.

The roll-picker-native is just a way better to see a ScrollView with some customizations.

Examples

Install

yarn add roll-picker-native

npm install roll-picker-native

expo install roll-picker-native

Basic Usage

Import roll-picker-native

import RollPickerNative from 'roll-picker-native'

<RollPickerNative
  items={['item1', 'item2', 'item3', 'item4', 'item5']}
  index={month}
  onIndexChange={(index: number) => console.log('month', index)}
/>

Code sample

import React, { useCallback, useState } from 'react'
import RollPickerNative from 'roll-picker-native'
import { Text, View } from 'react-native'

const App = () => {
  const days = Array.from({ length: 30 }, (_, i) => (i + 1).toString())
  const years = Array.from({ length: 30 }, (_, i) => {
    if (i < 9) return '200' + (i + 1).toString()
    return '20' + (i + 1).toString()
  })

  const months = [
    'January',
    'February',
    'March',
    'May',
    'April',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
  ]
  const [year, setYear] = useState(0)
  const [month, setMonth] = useState(0)
  const [day, setDay] = useState(0)

  const handleRoll = useCallback((field: string, index: number) => {
    switch (field) {
      case 'month': {
        setMonth(index)
        break
      }
      case 'day': {
        setDay(index)
        break
      }
      case 'year': {
        setYear(index)
        break
      }
    }
  }, [])

  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 15,
        backgroundColor: '#e5e5e5'
      }}
    >
      <View
        style={{
          width: '100%',
          flexDirection: 'row'
        }}
      >
        <RollPickerNative
          items={months}
          index={month}
          onIndexChange={(index: number) => handleRoll('month', index)}
          selectHeight={35}
          containerHeight={250}
          selectTextStyle={{
            fontSize: 22
          }}
        />
        <RollPickerNative
          items={days}
          index={day}
          onIndexChange={(index: number) => handleRoll('day', index)}
          selectHeight={35}
          containerHeight={250}
          selectTextStyle={{
            fontSize: 22
          }}
        />
        <RollPickerNative
          items={years}
          index={year}
          onIndexChange={(index: number) => handleRoll('year', index)}
          selectHeight={35}
          containerHeight={250}
          selectTextStyle={{
            fontSize: 22
          }}
        />
      </View>
      <Text
        style={{
          paddingVertical: 25,
          fontSize: 20,
          fontWeight: 'bold'
        }}
      >
        {months[month]}/{days[day]}/{years[year]}
      </Text>
    </View>
  )
}

export default App

Props

Name	Type	Default	Description
items	string[]	Required	Items of roll picker
label	string	undefined	Label title of component
labelStyle	TextStyle	undefined	Style of label
index	number	Required	index of roll picker
onIndexChange	(index: number) => null	undefined	Return index when scroll is stopped
containerHeight	number	200	Height of container
selectHeight	number	20	Height of item and box select
itemStyle	ViewStyle	undefined	Style of items not selected
itemTextStyle	TextStyle	undefined	Style of text each item
selectStyle	ViewStyle	undefined	Style of item selected
selectTextStyle	TextStyle	undefined	Style text of item selected
lineColor	ViewStyle.borderColor	'white'	Color of border top and bottom
removeLine	boolean	false	Remove border top and bottom