Flatlist inside into Scrollview

Question

I try to show some items inside a ScrollView, but it shows me this error.

VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

I tried with scrollview, but i need columns in my list.

    return (
      <View>        
        <ScrollView style={{backgroundColor: '#612d7c'}} >
          <View style={{marginTop: headerHeight}}>
            <ProfilePictureItem /> 
          </View>
          <View style={styles.badgeTextContainer}>
            <Text style={styles.badgeText}>Badges</Text>
          </View>
          <Card style={styles.card}>
            <FlatList
              data={products}
              style={{marginBottom: 20}}              
              renderItem={itemData => (
                <BadgeItem key={itemData.item.id} style={styles.badge}/>
              )}
              numColumns={3}              
            /> 
          </Card>        
        </ScrollView>        
      </View>
      );

Answer 1

That's right, either you display a ScrollView or a FlatList if you use the same scroll direction. For example, you can use the FlatList with the ListHeaderComponent prop.

You can try this:

function renderListHeader() {
    return (
        <View style={{marginTop: headerHeight}}>
            <ProfilePictureItem /> 
        </View>
        <View style={styles.badgeTextContainer}>
            <Text style={styles.badgeText}>Badges</Text>
        </View>
    )
}

.....

return (
    <FlatList
        data={products}
        ListHeaderComponent={renderListHeader()}
        style={{marginBottom: 20}}              
        renderItem={itemData => (
            <BadgeItem key={itemData.item.id} style={styles.badge}/>
        )}
        numColumns={3}              
    /> 
  );