VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList - backed contained instead. | React Native

ScrollView 안에 FlatList나 ScrollView를 사용해서 발생한 오류이다.

우선 기본적으로 FlatList에 scroll이 적용되니, 단순히 스크롤이 하나 필요한 거라면 같이 사용하지 않는다. 다른 요소를 FlatList와 함께 사용하고 싶다면 ListHeaderComponent와 ListFooterComponent에 다른 요소를 집어넣는다.

// Nope ❌
<ScrollView>
  <CategoryBar />
  <FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={item => item.id}
  />
</ScrollView>

// Use this ✅
<FlatList
  ListHeaderComponent={<CategoryBar />}
  data={DATA}
  renderItem={renderItem}
  keyExtractor={item => item.id}
/>

 

[형태]

FlatList와 ListHeaderComponent

 

각 FlatList마다 CatgoryBar를 넣고 싶다면 SectionList를 사용한다.

const DATA = [
  {
    title: "Category1",
    data: ["Pizza", "Burger", "Risotto"]
  },
  {
    title: "Category2",
    data: ["French Fries", "Onion Rings", "Fried Shrimps"]
  },
  {
    title: "Category3",
    data: ["Water", "Coke", "Beer"]
  },
  {
    title: "Category4",
    data: ["Cheese Cake", "Ice Cream"]
  }
];

// ...

<SectionList
  sections={DATA}
  keyExtractor={(item, index) => item + index}
  renderItem={({ item }) => <Item title={item} />}
  renderSectionHeader={({ section: { title } }) => (
  	<Text style={styles.header}>{title}</Text>
  )}
/>

여기서 item은 data 배열의 한 요소이고, section은 DATA 전체 중 한 요소(title, data 키를 가진 객체)를 말한다.

[형태]

SectionList

---

[참고자료]

How to Fix ‘VirtualizedLists should never be nested inside plain ScrollViews’ Warning

 

SectionList · React Native

 

FlatList · React Native