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

Rokas Kašinskas 💻

Lukas Baranauskas 💻

veizz 💻

Rafael Magalhães ⚠️

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