Picker

This component displays a control that allows the user to pick from a list of items.

Types

interface PickerPropsItem {
    label: string;
    value: string;
}

Props

// List of items to be displayed in the picker
items: PickerPropsItem[] = [];

// Initially-selected item
selectedValue: string;

// Invoked when the selected value changes
onValueChange: (itemValue: string, itemPosition: number) => void;

style: PickerStyleRuleSet | PickerStyleRuleSet[] = [];

Styles

**Text Color**
color: 'string';

Flexbox Styles

View Styles

Transform Styles

Methods

No methods

Sample Usage

const pickerItems: RX.Types.PickerPropsItem[] = [
    {
        label: 'Cool',
        value: 'cool'
    },
    {
        label: 'Super',
        value: 'super'
    },
    {
        label: 'Great',
        value: 'great'
    }
];

class MyComponent extends RX.Component<null, { selectedValue: string }> {
    constructor() {
        super();

        this.state = {
            selectedValue: 'cool'
        }
    }

    render(): JSX.Element {
        return (
            <RX.Text numberOfLines={ 1 }>
                <RX.Text> { 'How are you feeling? ' } </RX.Text>
                <RX.Picker
                    items={ pickerItems }
                    selectedValue={ this.state.selectedValue }
                    onValueChange={ this._onValueChange }
                />
            </RX.Text>
        );
    }

    private _onValueChange = (itemValue: string, itemIndex: number) => {
        this.setState({ selectedValue: itemValue });
    }
}