Optional icon prop for <SelectItem> component

[schmitzc]

Description

Add an additional optional prop to <SelectItem> to include an icon.

Problem Statement

My app has a dropdown that uses only icons for the item labels. I am using accessibility labels to ensure that the dropdown is still accessible.

Proposed Solution or API

I am using the React Native Dropdown Picker instead of the gluestack-ui Select component. It allows you to pass an icon as optional prop to the select item.

Alternatives

Is it possible to create a custom gluestack-ui component that can have an icon?

Additional Information

No response

[surajahmed]

@schmitzc We don't have this feature for now. We'll consider your request. Thanks for the suggestion.

[Viraj-10]

This enhancement require custom select on web for design consistency. Currently we are relying on native select on web which doesn't allow us to customised SelectItem.

[MarlonAEC]

Is there any workaround to achieve this? For example, creating your custom SelectItem and passing it the onValueChange callback or maybe a ref to invoke this onChangeValue until we can implement this? It would be nice to have this feature

[MarlonAEC]

Btw @schmitzc I was able to kinda fake what you were trying to achieve (adding an icon to the selected one) like this:

// ... rest of my select component
<SelectContent padding="$6">
  <SelectDragIndicatorWrapper>
    <View
      width="$8"
      height="$8"
      backgroundColor="red"
      justifyContent="center"
      alignItems="center"
      alignSelf="flex-end"
    >
      <CloseIcon />
    </View>
  </SelectDragIndicatorWrapper>
  <SelectItem label="" value="" />
  {field?.options?.map((option) => {
    if (!option) {
      return null;
    }
    const isSelected = selectedValueForIcon === option.value;
    return (
      <View flexDirection="row">
        <SelectItem
          key={option.id}
          label={option.value}
          value={option.value}
          paddingHorizontal={0}
          flexWrap="wrap"
          width="90%"
        />
        {isSelected && (
          <Icon
            as={CheckCircleIcon}
            width="$6"
            height="$6"
            fill="$success300"
            stroke={colors.background}
            alignSelf="center"
          />
        )}
      </View>
    );
  })}
</SelectContent>
//... rest of my select component

notice there is variable called selectedValueForIcon is just a useState that I use to save the current selected value to verify if it's the current one selected and based on that I hide or show the icon I want. Hope that helps!