UI Kitten - List component - How to get selected item

Question

I am building React-Native CLI app using the UI Kitten UI kit. In my render I have the below list.

  <List
    style={styles.listContainer}
    data={providerTypes}
    renderItem={renderItem}
    keyExtractor={(item) => item.Id.toString()}
  />

I have these methods for the list item and onPress events.

 const renderItem = ({item, index}) => (
    <ListItem
      title={`${item.ServiceCategory}`}
      description={`${item.ServiceType} `}
      accessoryRight={renderItemIcon}
      onPress={(item) => typeSelected(item)}
    />
  );
  const typeSelected = (item) => {
    console.log('item: ', item);
    console.log('item.Id: ', item.Id);
    alert('You touched list item: ', item.Id);
  };

When the typeSelected method is fired, item.Id is null, but item is one giant object with so much data, but I cannot find my item data anywhere in there?

I am very new to Kitten library and I dont know TypeScript much at all. I am also not using TypeScript in RN app, so I'm struggling to figure out how to use it here.

Answer 1

The problem is you are getting the even instead of the item

when you do

onPress={(item) => typeSelected(item)}

The item refers to the event and not the item in the index

you have to change it to

onPress={() => typeSelected(item)}