Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/reactseals/react-native-scrollable-picker
https://github.com/reactseals/react-native-scrollable-picker
Last synced: 6 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/reactseals/react-native-scrollable-picker
- Owner: reactseals
- License: mit
- Created: 2019-09-26T13:16:20.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T03:46:03.000Z (about 2 years ago)
- Last Synced: 2023-03-07T09:17:51.623Z (almost 2 years ago)
- Language: JavaScript
- Size: 874 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
## react-native-scrollable-picker
A pure JS scrollable picker solution for react-native, highly customizable.
-Auto height detection
## Usage
```jsx
import React, {Component} from 'react';
import ScrollPicker from 'react-native-scrollable-picker';
export default class SimpleExample extends Component {
handleClick = (index, options, onValueChange) => {
this.sp.scrollToIndex(index); // select 'c'
onValueChange(options[index]);
}
render() {
return(
{this.sp = sp}}
dataSource={options}
selectedIndex={0}
itemHeight={ITEM_HEIGHT}
wrapperHeight={500}
wrapperStyle={{
backgroundColor: 'transparent'
}}
renderItem={(data, index, isSelected) => {
return(
this.handleClick(index, options, onValueChange)}
style={{height: ITEM_HEIGHT}}>
{data}
)
}}
onValueChange={(data, selectedIndex) => {
onValueChange(options[selectedIndex]);
}}
/>
);
}
}
```
## Props
| Prop | Required | Default | Params type | Description |
| -------------------- | -------- | ------------ | ----------------------- | ----------------------------------- |
| dataSource | yes | | Array | Picker data |
| wrapperHeight | yes | | Number | Picker window height |
| renderItem | no | | Function | Renders picker options |
| selectedIndex | no | 0 | Number | Default selected value |
| onValueChange | no | () => {} | Function | Called on valie change |
| highlightStyle | no | | Style array | Called when epg boundaries are left |
| wrapperStyle | no | | Style array | Called when epg boundaries are left |
| itemHeight | no | 30 | Number | Picker's single item height |
| fixedHeight | no | false | Bool | Disable dynamic height calculation |
| rotationEnabled | no | true | Bool | Auto rotation support which is calling `handleWrapperHeightChange` method |
## Default styles
```jsx
wrapperStyle = {
height: this.wrapperHeight,
flex: 1,
overflow: 'hidden',
},
highlightStyle = {
position: 'absolute',
top: (this.wrapperHeight - this.itemHeight) / 2,
height: this.itemHeight,
width: highlightWidth,
},
itemWrapper: {
height: 30,
justifyContent: 'center',
alignItems: 'center',
},
itemText: {
color: '#999',
},
itemTextSelected: {
color: '#333',
},
```
## Contributors ✨
Thanks goes to these wonderful people :shipit:
Rokas Kašinskas
Lukas Baranauskas
veizz
Rafael Magalhães
This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!