Home > database >  How to highlight the selected item in the dropdown list of Picker in react native
How to highlight the selected item in the dropdown list of Picker in react native

Time:10-04

I'm using the Picker component of react native and want to apply CSS like background color for the selected item in the dropdown list of Picker.

below is my code snippet:

                    <Text style={clStyle.schoolNameLabel}>School Board*</Text>
                    <Picker
                        mode="dropdown"
                        itemStyle={clStyle.schoolNamePickerStyle}
                        style={clStyle.schoolNamePickerStyle}
                        placeholder="Select"
                        selectedValue={values.board_id}
                        onValueChange={(value) => {
                            handleSchoolBoardChange(value, setFieldTouched, handleChange);
                        }}
                        enabled={schools && schools.length > 0 ? false : true}
                    >
                        <Picker.Item label="Select" color="#ccc" value="" />
                        {updateBoardDropdown()}
                    </Picker>

updateBoardDropdown = () => {
    try {
        const all_items =
            this.props.metaData &&
            this.props.metaData.boardResponse &&
            this.props.metaData.boardResponse.length > 0 &&
            this.props.metaData.boardResponse.map((_board: BoardResponse, i: number) => {
                return (
                    <Select.Item
                        key={_board.id}
                        backgroundColor="yellow"
                        color="red"
                        label={_board.name}
                        value={_board.id.toString()}
                    />
                );
            });
        return all_items;
    } catch (e) {
        SentryException({
            property: '           
  • Related