navigate inside renderItem of Flatlist

August 24, 2022

I have a component InventoryScreen, which holds a Flatlist like this:

 <FlatList
            numColumns={2}
            data={filteredData}
            keyExtractor={(item, index) => index.toString()}
            renderItem={renderItem}
            stickyHeaderIndices={[0]}
            keyboardDismissMode={"on-drag"}>
</FlatList>
<TouchableOpacity
      onPress={() => navigation.navigate("ItemScreen") }> // <--- Here, it works.
</TouchableOpacity

Inside InventoryScreen, I can use navigation.

renderItem:

const renderItem = ({ item }: { item: ItemResponse }) => {
  return <ItemView item={item} />;
};

ItemView

const ItemView = ({ item }: { item: ItemResponse }) => {
  return (
<TouchableOpacity
      onPress={() => navigation.navigate("ItemScreen") }> // <--- This is what I want.
</TouchableOpacity

But, because there is no navigation available in ItemView, I cant navigate inside there. When trying to pass navigation to the renderItem gives me an error inside the FlatList:

Property 'navigation' is missing in type 'ListRenderItemInfo<ItemResponse>' but required in type '{ item: ItemResponse; navigation: any; }'.

How can I access navigation inside ItemView ?

>Solution :

Please try this
Root Component

const RootComp = ({navigation})=>{

    const renderItem = ({ item }: { item: ItemResponse }) => {
      return <ItemView item={item} navigation={navigation} />;
    };

return (
<FlatList
            numColumns={2}
            data={filteredData}
            keyExtractor={(item, index) => index.toString()}
            renderItem={renderItem}
            stickyHeaderIndices={[0]}
            keyboardDismissMode={"on-drag"}>
</FlatList>
)

}

ItemView

const ItemView = ({ item, navigation }: { item: ItemResponse }) => {
  return (
<TouchableOpacity
      onPress={() => navigation.navigate("ItemScreen") }> // <--- This is what I want.
</TouchableOpacity