Typescript Flatlist renderitem type is not assignable

Question

Why I get this typeerror message on renderItem?

Type 'ListRenderItem<IArr>' is not assignable to type 'ListRenderItem<unknown> | AnimatedNode<ListRenderItem<unknown> | null | undefined> | null | undefined'.
  Type 'ListRenderItem<IArr>' is not assignable to type 'ListRenderItem<unknown>'.

Code:

interface IArr {
  id: string;
  text: string;
}

const arr: IArr[] = [
  {
    id: '1',
    text: 'DATA'
  },
  {
    id: '2',
    text: 'SERVER'
  },
  {
    id: '3',
    text: 'Auto'
  },
  {
    id: '4',
    text: 'CENTER'
  }
];

const renderItem: ListRenderItem<IArr> = ({ item }) => {
  return (
    <View>
      <Text>{item.text}</Text>
    </View>
  )
};

export default function App() {
  return (
    <GestureHandlerRootView style={s.container}>
      <AnimatedFlatlist 
        keyExtractor={(i) => i.id}
        data={arr}
        renderItem={renderItem}
      />
    </GestureHandlerRootView>
  )
}

What I am doing wrong ?

..............................................................................................................................

Answer 1

I think AnimatedFlatList and ListRenderItem types are not working perfectly. You can change renderItem function like this

const renderItem = ({ item }: {item:IArr}) => {
  return (
    <View>
      <Text>{item.text}</Text>
    </View>
  )
};