javascriptreact-nativenative-base

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


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: '🚀 ~ file: create-lead-screen.tsx ~ line 674 ~ CreateLead ~ e',
            message: e as Error,
        });
    }
};

Please help Thanks


Solution

  • In updateBoardDropdown add check of values.board_id== _board.id like

    <Select.Item
        key={_board.id}
        backgroundColor="yellow"
        color="red"
        label={_board.name}
        value={_board.id.toString()}/>
    

    to

    <Select.Item
        key={_board.id}
        backgroundColor={values.board_id== _board.id ? "grey":"yellow"}
        color="red"
        label={_board.name}
        value={_board.id.toString()}/>