React Native Dropdown Picker – Dropdown

by
Ali Hasan
dropdown react-native

Quick Fix: To add icons to your React Native Dropdown Picker, set the icon property within each item in the items array. The icon property can be a function that returns a JSX element or a string representing an icon component name.

The Problem:

I am trying to implement a dropdown picker in React Native using the ‘DropDownPicker’ component. I want to add icons to the left of the dropdown items, and I have tried using the ‘renderBadgeItem’ prop but it is not working. When I select an item, only the label is displayed, not the icon.

The Solutions:

Solution 1: Using Custom Icon Function

To add an icon to the left of each item in the dropdown picker, define the items property as an array of objects. Each object should include a label property for the item’s text, a value property for the item’s value, and an icon property.

The icon property can be a function that returns a JSX element representing the icon. For example:

{
  label: 'Ethereum',
  value: 'eth',
  icon: () => (
    <Ionicons name="md-checkmark-circle" size={32} color="blue" />
  ),
}

In this example, the icon is a blue checkmark circle. You can use any icon component you like, or create your own custom icon.

Example:

import { Ionicons } from '@expo/vector-icons';

const networkItems = [
  {
    label: 'Ethereum',
    value: 'eth',
    icon: () => (
      <Ionicons name="md-checkmark-circle" size={32} color="blue" />
    ),
  },
  // ... other items
];

<DropDownPicker
  open={networkOpen}
  value={networkValue}
  items={networkItems}
  setOpen={setNetworkOpen}
  setValue={setNetworkValue}
  setItems={setNetworkItems}
  style={$dropdown}
  textStyle={$dropdownText}
  dropDownContainerStyle={$dropdownListContainer}
  itemSeparatorStyle={{
    borderBottomColor: colors.palette.black,
    borderBottomWidth: spacing.z,
  }}
  showTickIcon={false}
  zIndex={2000}
  zIndexInverse={2000}
/>

Q&A

How to add an icon to the left of the dropdown items in React Native Dropdown Picker?

Define the items property of the DropDownPicker component to include an icon property. The icon property can be a function that returns a JSX element, or it can be a string that refers to the name of an icon component.

Will Custom component will work with onPress of item?

No, Selecting item with custom component shown in dropdown list will only display the label of the item.

Video Explanation:

The following video, titled "React Native Easy Dropdown Select List - YouTube", provides additional insights and in-depth exploration related to the topics discussed in this post.

Play video

The most frustrating thing when you are a newbie to reactnative is using equivalent of html's select in reactnative , but i have made it ...