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 。

placeholder

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

placeholderColor

String. font color of placeholder.

value

String or Number. 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. The items for the component to render. Each item should be in the following format: { 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 ] .