Correct use of RenderListItem

[Angelk90]

Hi @hossein-zare , I have elements in an array that have a structure other than like this:

[
  {label: 'Apple', value: 'apple'},
  {label: 'Banana', value: 'banana'}
]

Example:

[
 {"code": "af", "flag": "🇿🇦", "name": "Afrikaans"},
 {"code": "sq", "flag": "🇦🇱", "name": "Albanian"}
]

Reading the documentation, considering my case I thought I would use: itemKey="code"

Then I use renderListItem to display the various elements, but I can't import the renderListItem.

I tried like this: import DropDownPicker, {renderListItem} from 'react-native-dropdown-picker';

But it doesn't seem to work, what is the right approach?

[hossein-zare]

Hi,

I think you should customize the schema. Here's what you need: https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/item-schema

renderListItem is not a component, it's a property. https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/advanced/list-and-items#renderlistitem

[Angelk90]

@hossein-zare : Ok, the problem is as you can see I should show the flag next to the name. But the flag is not an icon.

If I put flag in place of name it works, but I can't put both.

schema={{
                  label: 'name', // required
                  value: 'code', // required
                  icon: 'icon',
                  parent: 'parent',
                  selectable: 'selectable',
                  disabled: 'disabled',
                  testID: 'testID',
                  containerStyle: 'containerStyle',
                  labelStyle: 'labelStyle'
              }}

[hossein-zare]

You should copy https://github.com/hossein-zare/react-native-dropdown-picker/blob/5.x/src/components/RenderListItem.js and create a custom component.

renderListItem={(props) => <MyCustomItem {...props} />}