rn-scrollable-picker

A pure JS scrollable picker solution for react-native, highly customizable.

-Auto height detection

Usage

npm i rn-scrollable-picker

import React, {Component} from 'react';
import ScrollPicker from 'rn-scrollable-picker';

export default class SimpleExample extends Component {


    handleClick = (index, options, onValueChange) => {
        this.sp.scrollToIndex(index);   // select 'c'
        onValueChange(options[index]);
    }

    render() {
        return(
            <ScrollPicker
                ref={(sp) => {this.sp = sp}}
                dataSource={options}
                selectedIndex={0}
                itemHeight={ITEM_HEIGHT}
                wrapperHeight={500}
                wrapperStyle={{
                    backgroundColor: 'transparent'
                }}
                renderItem={(data, index, isSelected) => {
                    return(
                        <TouchableOpacity 
                        onPress={() => this.handleClick(index, options, onValueChange)} 
                        style={{height: ITEM_HEIGHT}}>
                            <Text style={isSelected ? {
                                    color: '#fff',
                                    textAlign: 'center',
                                    fontSize: 34,
                                    height: 50,
                                    fontWeight: 'bold'
                                } : {
                                    color: '#fff',
                                    textAlign: 'center',
                                    fontSize: 20,
                                    height: 50,
                                    fontWeight: '300'
                                }}
                            >
                                {data}
                            </Text>
                        </TouchableOpacity>
                    )
                }}
                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

        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:

This project follows the all-contributors specification. Contributions of any kind welcome!