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[] = [];

// 'dialog': Show a modal dialog
// 'dropdown': Shows a dropdown anchored to the picker view
mode: 'dialog' | 'dropdown' = 'dialog'; // Android only

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

// Initially-selected item
selectedValue: string;

// See below for supported styles
style: PickerStyleRuleSet | PickerStyleRuleSet[] = [];

// ID that can be used to identify the instantiated element for testing purposes.
testId: string = undefined;

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.View>
                <RX.Text>
                    { 'How are you feeling?' }
                </RX.Text>
                <RX.Picker
                    items={ pickerItems }
                    selectedValue={ this.state.selectedValue }
                    onValueChange={ this._onValueChange }
                />
            </RX.View>
        );
    }

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