React Native FlatList is giving error that It doesnot be nested inside scrollView

349 views Asked by At

I am using native base, and the error is for flatlist that it contains inbuild scroll view no need to nest it into scrollView react native flatlist Image 1 code:

<Container>
    <Content>
        <View>
            ***
        </View>
        <FlatList 
            {...props}
        />
    </Content>
</Container>

Image 2 code:

<View>
    <View>
        <View>
            ***
        </View>
        <FlatList 
            {...props}
        />
    </View>
</View>

I want both parts to scroll without error, can anyone help me out with this?

2

There are 2 answers

0
Nooruddin Lakhani On

You'll need to slightly modify your structure

<View>
  <ScrollView>
    <View>
        ***
    </View>
    <FlatList 
        {...props}
    />
  </ScrollView>
</View>
0
Haseeb A On

The Content in nativebase is basically a scrollview.

You can make use of FlatList's `Header and Footer Component functionality. and mark content above FlatList as Header and content bellow it a footer.

const ContentAbove=()=>(
  <View>**</View>
)

//Then inside the component
-----
<Container>
    <FlatList
            ListHeaderComponent={<ContentAbove/>}
            ListFooterComponent={<ContentBelow/>}
            {...props}
        />
</Container>