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
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()}/>