How do i customize the label in 'react-native-dropdown-picker'?

Question

I have implemented the react-native-dropdown-picker. It's working fine, but I would like to customize the items in the dropdown list. I cannot find any examples on how to do this - not even on their page...

Specifically, what I'm after is a small representation of a color as a prefix to the name of the color

There's a function called "renderListItem", that's referenced on their page, but it's not documented very well.

With this implementation, I get what I'm after: a 20x20 pixel representation of the color of the item - but the selection is not sticking...

function handleListItemPress(itemProps) {
  itemProps.onPress(itemProps);
}

<DropDownPicker
  // closeAfterSelecting={true}
  showTickIcon={true}
  onOpen={onlyOneOpenDropDownPicker('backgroundcolor')}
  style={styles.dropDown}
  placeholder='Select backgroundColor'
  open={backgroundColorsOpen}
  value={selectedBackgroundColor}
  items={colors}
  setOpen={setBackgroundColorsOpen}
  setValue={setSelectedBackgroundColor}
  // setItems={setItems}
  schema={{
    label: 'color',
    value: 'color',
  }}
  searchable={true}
  renderListItem={( {
                      onPress,
                      value,
                      label,
                      isSelected,
                    }) => {
    return (
      <TouchableOpacity
        onPress={() => onPress(value)}
        style={{ flexDirection: 'row', padding: 5 }}>
        <View
          style={{
            backgroundColor: value.toString(),
            width: 20,
            height: 20,
          }}
        />
        <Text>{label}</Text>
      </TouchableOpacity>
    );
  }}
/>

Answer 1

So, i finally made it work! This is proof that sometimes you really need to take a break...

A working DropDownPicker;

const [backgroundColorsOpen, setBackgroundColorsOpen] =
    React.useState<boolean>(false);

const [selectedBackgroundColor, setSelectedBackgroundColor] =
    React.useState<string>(item.backgroundColor);


                    <DropDownPicker
                        // closeAfterSelecting={true}
                        showTickIcon={true}
                        style={styles.dropDown}
                        placeholder='Select backgroundColor'
                        open={backgroundColorsOpen}
                        value={selectedBackgroundColor}
                        items={colors}
                        setOpen={setBackgroundColorsOpen}
                        setValue={setSelectedBackgroundColor}
                        // setItems={setItems}
                        schema={{
                            label: 'color',
                            value: 'color',
                        }}
                        searchable={true}
                        renderListItem={itemProps => {
                            return (
                                <TouchableOpacity
                                    onPress={() => setSelectedBackgroundColor(itemProps.value)}
                                    style={{
                                        flexDirection: 'row',
                                        padding: 5,
                                        marginLeft: 10,
                                        borderTopWidth: itemProps.isSelected
                                            ? 1
                                            : 0,
                                        borderBottomWidth: itemProps.isSelected
                                            ? 1
                                            : 0,
                                        borderColor: 'darkgrey'
                                    }}>
                                    <View style={{ flex: 1, flexDirection: 'row' }}>
                                        <View
                                            style={{
                                                backgroundColor: itemProps.value,
                                                marginRight: 10,
                                                borderColor: 'grey',
                                                borderWidth: 1,
                                                width: 20,
                                                height: 20,
                                            }}
                                        />
                                        <Text>{itemProps.label}</Text>
                                    </View>
                                    {itemProps.isSelected === true && (
                                        <itemProps.TickIconComponent />
                                    )}
                                </TouchableOpacity>
                            );
                        }}
                    />