Generic type on ```renderListItem```

[AntonnyAGS]

Should it receive generic type.. so we can put more arguments on item list

[mikehardy]

Hi there!

Do you mean specifically this signature? https://github.com/hossein-zare/react-native-dropdown-picker/blob/00aa22c5126c8f1ba97f6b879b9579e8ffedf0d0/index.d.ts#L183

What would you propose, expressed as a valid signature to use in its place?

[AntonnyAGS]

Hi there!

Do you mean specifically this signature?

https://github.com/hossein-zare/react-native-dropdown-picker/blob/00aa22c5126c8f1ba97f6b879b9579e8ffedf0d0/index.d.ts#L183

What would you propose, expressed as a valid signature to use in its place?

yes, i wanted use it to customize list item with my own attributes

[mikehardy]

@AntonnyAGS

What would you propose, expressed as a valid signature to use in its place?

[peterchibunna]

I found out that in my use case, if I replace the renderListItem with the list item that makes the selector to fit in with my project, the onPress of the List Item does not fire thus making it impossible for the selection of items to propagate fully.

function getItemsArray() {
  return  [{label: 'Apple', value: 'apple'},
	  {label: 'Banana', value: 'banana'},
	  {label: 'Cranberry', value: 'cranberry'},
	  {label: 'Durian', value: 'durian'},
	  {label: 'Eggplant', value: 'eggplant'}]
}

const [open, setOpen] = useState(false);

const [value, setValue] = useState(null);
const [items, setItems] = useState(getItemsArray());
const [canSubmit, setCanSubmit] = useState(false);
const [cropsLoading, setCropsLoading] = useState(false);
...

<DropDownPicker
    open={open}
    value={value}
    items={items}
    setOpen={setOpen}
    setValue={setValue}
    setItems={setItems}
    loading={cropsLoading}
    ActivityIndicatorComponent={({color, size}) => <ActivityIndicator color={color} size={size} />}
    activityIndicatorColor={Colors.blue300}
    searchable={true}
    
    listMode={'MODAL'}
    placeholder={'Choose Food'}
    placeholderStyle={{color: Colors.grey600,fontSize: 16}}
    itemSeparator={true}
    itemSeparatorStyle={{
	    backgroundColor: Colors.grey200, //marginVertical: 5,
    }}
    modalProps={{
	    animationType: 'slide'
    }}
    renderListItem={(props) =><List.Item description={`Category: DEMO`} title={props.label} {...props} />}
/>

If I comment out the renderListItem line, the picker works fine. PS. The <List.Item /> I'm using accepts onPress props.

[mikehardy]

@peterchibunna that's an interesting finding - but I'm not sure what it has to do with generic typing in the typescript definitions? :thinking:

[ShyamKatti]

@mikehardy I have the same issue, providing a custom renderListItem makes the items in the list unselectable. Is there a suggestion on how to make it work?

[mikehardy]

@ShyamKatti that is the same unrelated problem to this actual issue. You saying "I have the same issue" makes me read the title of this issue, which is in reference to a typescript definition. But then your next statement has nothing to do with typescript definitions :thinking: so I'm confused.

Probably best to open a new issue with https://stackoverflow.com/help/minimal-reproducible-example but please note that even better than that is to do the work in node_modules with the javascript files to figure out the problem and post a PR. I don't use custom renderListItems so this is not a use case of mine, I won't have time fix it other than just in general collaborating with developers that propose reasonable PRs to help get them merged and released.

Future people: If you have a PR that fixes types, please discuss here. If you want to write something that is not about a generic type on renderListItems, then post elsewhere please so the issue is focused and actionable.

[ShyamKatti]

@mikehardy Sorry for the confusion, I meant the issue where the a list item cannot be selected on passing custom renderListItem.

[biancadragomir]

hi, is there a solution for this?

[VolkerLieber]

This happens because an invalid type definition in interface RenderListItemPropsInterface<T>. onPress is defined as (value: T) => void, but is used as (item: ItemType<T>, custom?: boolean) => void in RenderListItem.js

I've submitted a PR with the correct definition. Until it's accepted, you can either just call the onPress function like this:

onPress={() => {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    props.onPress(props.item, props.custom);
}}

or update the interface yourself if you only build locally.