https://github.com/ale-vncs/roll-picker-native
An interactive alternative to Picker.
https://github.com/ale-vncs/roll-picker-native
android ios react react-native react-native-app roll-picker roll-picker-native scroll scrollview
Last synced: 8 months ago
JSON representation
An interactive alternative to Picker.
- Host: GitHub
- URL: https://github.com/ale-vncs/roll-picker-native
- Owner: ale-vncs
- License: mit
- Created: 2021-03-22T22:22:56.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2021-03-28T18:13:41.000Z (over 5 years ago)
- Last Synced: 2024-10-30T07:29:07.139Z (over 1 year ago)
- Topics: android, ios, react, react-native, react-native-app, roll-picker, roll-picker-native, scroll, scrollview
- Language: TypeScript
- Homepage:
- Size: 1.28 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://github.com/semantic-release/semantic-release)
[](https://github.com/prettier/prettier)
# roll-picker-native
An interactive alternative to Picker.
The `roll-picker-native` is just a way better to see a Picker 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`
````js
import RollPickerNative from 'roll-picker-native'
````
```js
console.log('month', index)}
/>
```
#### Code sample
````js
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 (
handleRoll('month', index)}
selectHeight={35}
containerHeight={250}
selectTextStyle={{
fontSize: 22
}}
/>
handleRoll('day', index)}
selectHeight={35}
containerHeight={250}
selectTextStyle={{
fontSize: 22
}}
/>
handleRoll('year', index)}
selectHeight={35}
containerHeight={250}
selectTextStyle={{
fontSize: 22
}}
/>
{months[month]}/{days[day]}/{years[year]}
)
}
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 |