Fix this React Native error VirtualizedList contains a cell which itself contains more than one VirtualizedList

Question

When I load my React Native project, I am getting this Error:

A VirtualizedList contains a cell which itself contains more than one VirtualizedList of the same orientation as the parent list. You must pass a unique listKey prop to each sibling list.

How can I fix it?

Error Showing:

Code:

const Home = () => {
    
    function renderRecentEvent() {
        return (
                    <FlatList 
                        data = {recentData}
                        lisKey = {item => item.id}
                        showsVerticalScrollIndicator = {false}  
                        renderItem={({item}) => {
                            return (
                                <View>
                                    <Text>{ item.event_name }</Text>  
                                </View>
                            )
                        }}                         
                    />
        )
    }


    function renderMonthEvent() {
        return (
                    <FlatList 
                        data = {todayData}
                        lisKey = {item => item.id}
                        showsVerticalScrollIndicator = {false}  
                        renderItem={({item}) => {
                            return (
                                <View>
                                    <Text>{ item.event_info }</Text>  
                                </View>
                            )
                        }}                         
                    />
        )
    }


    return (
        <View>
                <FlatList 
                    data = {eventData}
                    keyExtractor = {item => item.id}
                    keyboardDismissMode = 'on-drag'
                    showsVerticalScrollIndicator = {false}
                    ListHeaderComponent = {
                        <View>
                            {renderRecentEvent()}

                            {/* --------- Month Event  --------- */}
                            {renderMonthEvent()}                 
                        </View>
                    }
                    renderItem = { ({item}) => {
                        return (
                            <CategoryCard 
                                categoryItem={item}
                            />
                        )
                    }}
                    ListEmptyComponent = {
                        <View 
                            style = {{ marginBottom: 100 }}
                        />
                    }
                />
        </View>
    )

}

Answer 1

As the error says "You must pass a unique listkey prop to each sibling list".

If there are multiple VirtualizedLists at the same level of nesting within another VirtualizedList, this key is necessary for virtualization to work properly.

For example:

<FlaList>
  <FlaList listKey="1.1" />
  <FlaList listKey="1.2" />
</FlaList>
<FlaList>
  <FlaList listKey="2.1" />
  <FlaList listKey="2.2" />
</FlaList>

Update

In your example, you have a typo in the prop name. You have to write listkey not lisKey.

const Home = () => {
  function renderRecentEvent() {
    return (
      <FlatList
        data={recentData}
        listKey="recent-event"
        keyExtractor={item => item.id}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item.event_name}</Text>
            </View>
          );
        }}
      />
    );
  }

  function renderMonthEvent() {
    return (
      <FlatList
        data={todayData}
        listKey="month-event"
        keyExtractor={item => item.id}
        showsVerticalScrollIndicator={false}
        renderItem={({ item }) => {
          return (
            <View>
              <Text>{item.event_info}</Text>
            </View>
          );
        }}
      />
    );
  }

  return (
    <View>
      <FlatList
        data={eventData}
        keyExtractor={item => item.id}
        keyboardDismissMode="on-drag"
        showsVerticalScrollIndicator={false}
        ListHeaderComponent={
          <View>
            {renderRecentEvent()}
            {renderMonthEvent()}
          </View>
        }
        renderItem={({ item }) => {
          return <CategoryCard categoryItem={item} />;
        }}
        ListEmptyComponent={<View style={{ marginBottom: 100 }} />}
      />
    </View>
  );
};