Picker

Picker (select) component for React Native. (Android & iOS)

Demo:

Demo Source Code

Installation

https://github.com/caoyongfeng0214/rn-overlay#installation

Usage

import React from 'react';
// the Overlay is rn-overlay
import { View, Button, Text, Overlay } from 'react-native';

const Picker = Overlay.Picker;

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            v0: -1
        };
    }

    render() {
        let items = [
            { label: 'NodeJs', value: 0 },
            { label: 'C#', value: 1 },
            { label: 'Python', value: 2 },
            { label: 'Lua', value: 3 },
            { label: 'C++', value: 4 },
            { label: 'Erlang', value: 5 },
            { label: 'Java', value: 6 },
            { label: 'Visual Basic', value: 7 },
            { label: 'Object-C', value: 8 },
            { label: 'Perl', value: 9 },
            { label: 'Go', value: 10 }
        ];

        return <View style={{paddingTop:88}}>
            <Text style={{fontSize:30, textAlign:'center', paddingBottom:20}}>Picker (select)</Text>
            <Picker value={this.state.v0}
                placeholder="Select an Item"
                placeholderColor="#999"
                items={items}
                onConfirm={(selectedVal, selectedIdx, selectedItem) => {
                    this.setState({
                        v0: selectedVal
                    });
                }}
            />
        </View>;
    }
}

export default App;

Props

some styles

inputStyle、itemStyle、itemTextStyle、containerStyle、headStyle、closeTextStyle、confirmTextStyle、focusBoxBorderColor 。

splitColor、titleStyle、items.columns[X].titleStyle、items.columns[X].style 。

placeholder

String. display some text when not any item be selected.

placeholderColor

String. font color of placeholder.

value

String or Number or Array. value of the selected item.

closeText

String. text on [ CloseButton ]. default value: 'Close' .

confirmText

String. text on [ ConfirmButton ]. default value: 'Confirm' .

head

Component or Function. customize [ Head ] .

input

Component or Function. customize [ Input ] .

item

Component or Function. customize [ Picker Item ] .

items

Array or Object. The items for the component to render.

item of Array format: { label: 'Javascript', value: 0 } .

Object format:

{
    columns: [
        {
            title: '',  // title of the Column. optional
            titleStyle: { }, // optional. it will overwrite props.titleStyle
            style: { }, // optional
            items: [ { label: 'Javascript', value: 0 } ]
        }
    ]
}

onShow

Function. callback triggered right after the shown of the picker.

onClose

Function. callback triggered right after the closed of the picker.

onConfirm

Function. callback triggered right after clicked [ ConfirmButton ].

onChange

Function. call the function after selected item changed.

Instance Methods

show()

open the picker.

close()

close the picker.

fireConfirm()

fire confirm event of the picker. same as click [ ConfirmButton ] .