[React Native - ios/android] VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

 

# 현상

전체 화면이 <View> 로 감싸져 있고 내부에 <FlatList> 가 있는 상태에서, 전체화면 스크롤을 위해 <View> 를 <ScrollView> 로 변경하자 에러 발생함

 ERROR  VirtualizedLists should never be nested inside plain ScrollViews with the same orientation because it can break windowing and other functionality - use another VirtualizedList-backed container instead. 

 

//before
<View>
    ...
    <View />
    ...
    <FlatList ... />
    ...
</View>

//after
<ScrolLView>
    ...
    <View />
    ...
    <FlatList ... />
    ...
</ScrolLView>

 

# 원인

<FlatList> 의 scroll 기능과 <ScrollView> 의 scroll 기능이 충돌하여, 그 중 상위 뷰인 <ScrollView>만 정상 작동하면서 발생한 에러

 

# 해결

Flatlist 상단에 View 가 있는 구조이기 때문에 ListHeaderComponent 사용하여 해결

만약 Flatlist 하단에 View 가 있는 구조였다면, ListFooterComponent 를 사용하면 된다

...
const ListFooterComponent = () => {
    return (
        ...
        <View />
        ...
    )
}

<View>
    ...
    <FlatList 
        ListFooterComponent={ListFooterComponent}
        ... 
    />
    ...
</View>