Question 34435 in React native Question posted in
The official React Native documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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;
    Login or Signup to reply.
  2. 0

    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()}/>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search