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

Question

I am using native base, and the error is for flatlist that it contains inbuild scroll view no need to nest it into scrollView 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?

score 0 · Answer 1 · answered Oct 09 '20 at 13:14

0

You'll need to slightly modify your structure

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

answered Oct 09 '20 at 13:14

Nooruddin Lakhani

7,507
2
19
39

score 0 · Answer 2 · answered Oct 09 '20 at 14:30

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>

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

2 Answers2