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

Question

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

share updateBoardDropdown code – Xhirazi Oct 03 '22 at 07:51 — Xhirazi, Oct 03 '22 at 07:51

score 1 · Accepted Answer · answered Oct 03 '22 at 11:17

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

score 0 · Answer 2 · answered Oct 03 '22 at 08:13

you can use the dropdown from native-base and here is the code.

import { NativeBaseProvider, Select } from 'native-base';
import React, { memo } from 'react';
import { Text, View } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';
import { hp, wp } from '../constants/scaling';
import { colors, fonts } from '../constants/theme';
import selectStyles from '../styles/selectStyles';
import { textStyles } from '../styles/textStyles';
const CustomDropDownInput = ({ label, placeholder, data, value, setValue }) => {
    return (
        <View style={{ alignSelf: 'center', height: hp(12) }}>
            <NativeBaseProvider>
                <Text
                    style={{
                        ...textStyles.Label,
                        color: 'rgba(255,255,255,1)',
                        alignSelf: 'flex-start'
                    }}>
                    {label}
                </Text>

                <Select
                    useNativeDriver={true}
                    selectedValue={value}
                    minWidth={wp(96)}
                    accessibilityLabel={placeholder}
                    placeholder={placeholder}
                    placeholderTextColor={'rgba(255,255,255,1)'}
                    _item={selectStyles._item}
                    customDropdownIconProps={{
                        color: '#fff',
                        marginRight: wp(3)
                    }}
                    _selectedItem={selectStyles._selectedItem}
                    mt={1}
                    borderWidth={0}
                    borderRadius={0}
                    h={hp(7)}
                    backgroundColor={colors.inputBgColor}
                    fontFamily={fonts.Medium}
                    color={'#fff'}
                    fontSize={RFValue(14)}
                    borderBottomColor={'#fff'}
                    borderBottomWidth={1}
                    style={{
                        backgroundColor: '#0000',
                        borderWidth: 0
                    }}
                    onValueChange={itemValue => setValue(itemValue)}>
                    {data.map((item, index) => {
                        return (
                            <Select.Item
                                label={item.label}
                                value={item.value}
                                key={`${index}`}
                            />
                        );
                    })}
                </Select>
            </NativeBaseProvider>
        </View>
    );
};

const compareProps = (prevProps, nextProps) => {
    if (prevProps == nextProps) {
        return false;
    }
    return true;
};
export default memo(CustomDropDownInput, compareProps);

here are the selectStyles.js file

import {Icon} from 'native-base';
import React from 'react';
import {Platform} from 'react-native';
import {RFValue} from 'react-native-responsive-fontsize';
import Entypo from 'react-native-vector-icons/Entypo';
import {wp} from '../constants/scaling';
import {colors, fonts} from '../constants/theme';
const selectStyles = {
  _item: {
    pt: Platform.OS === 'android' ? 2 : 2,
    pb: Platform.OS === 'android' ? 2 : 2,
    borderBottomWidth: 1,
    justifyContent: 'center',
    borderRadius: 5,
    borderBottomColor: 'rgba(0,0,0,.1)',
    _text: {
      includeFontPadding: false,
      textAlign: 'center',
      fontFamily: fonts.Medium,
      fontSize: RFValue(13),
      color: colors.textPrimaryColor,
    },
  },
  _selectedItem: {
    bg: colors.primaryColor,
    justifyContent: 'center',
    _text: {
      includeFontPadding: false,
      textAlign: 'center',
      fontSize: RFValue(13),
      textAlignVertical: 'center',
      fontFamily: fonts.Bold,
      color: '#fff',
    },
    endIcon: (
      <Icon as={Entypo} name={'check'} size={wp(5)} color={colors.white} />
    ),
  },
};

export default selectStyles;

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

2 Answers2