How to put FlatList inside of the ScrollView in React-native?

Question

I know these kind of questions have in the stackoverflow before. But I cannot the find the correct solution for this problem.

Have any solution for put <FlatList/> inside of the <ScrollView></ScrollView> in react-native?

here is my code...

          <ScrollView
              onScroll={(e) => {
              onScroll(e);
              }}
              stickyHeaderIndices={[1]}
              contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
              style={{ width: '100%' }}
          >
              <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              
              {isLoading ? (
                <DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
              ) : (
                <FlatList
                  data={data}
                  keyExtractor={(item, index) => String(index)}
                  renderItem={({ item }) => (
                    <View
                      style={{
                        flex: 0,
                        padding: 5,
                      }}>
                      <Card style={styles.card}>
                        <CardItem header style={styles.cardText}>
                          <Title style={styles.textSign}>{item.question}</Title>
                        </CardItem>
                        <CardItem style={styles.cardText1}>
                          <Body>
                            <Paragraph>{item.answer}</Paragraph>
                          </Body>
                        </CardItem>
                      </Card>
                    </View>
                  )}
                />
              )}
              </View>
          </ScrollView>

Error gives as follow:

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.

this happens because inside the FlatList there is a ScrollView too, what you can do is wrap your FlatList in a View to separate the Scroll's — Remato, Oct 07 '21 at 22:23
you can use `FlatList`'s `ListHeaderComponent` or `ListFooterComponent` to put some of your other components. — Four, Oct 27 '22 at 16:34

score 4 · Answer 1 · answered Oct 11 '21 at 05:47

I found the solution for that. I put my <ScrollView></ScrollView> component codes inside of <FlatList> ListHeaderComponent props.

Here is how it looks. I'm pretty sure this should works for every-one

I found that solution from here. you can refer it and can understandable it very easily. How to Fix 'VirtualizedLists should never be nested inside plain ScrollViews' Warning

 <View
    style={{
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    }}>
    {isLoading ? (
      <DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
    ) : (
      <FlatList
        data={data}
        ListHeaderComponent={   //here I write ListHeaderComponent and put all code lines of `<ScrollView></ScrollView>` in here
          <View
            style={{
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Image
              source={require('../assets/Interview.png')}
              width="100%"
              height="0"
              style={styles.logo2}
            />
          </View>
        }
        keyExtractor={(item, index) => String(index)}
        renderItem={({ item }) => (
          <View
            style={{
              flex: 0,
              padding: 5,
            }}>
            <Card style={styles.card}>
              <CardItem header style={styles.cardText}>
                <Title style={styles.textSign}>{item.question}</Title>
              </CardItem>
              <CardItem style={styles.cardText1}>
                <Body>
                  <Paragraph>{item.answer}</Paragraph>
                </Body>
              </CardItem>
            </Card>
          </View>
        )}
      />
    )}
  </View>

score 2 · Answer 2 · answered Jun 15 '22 at 11:56

2

You can do this by,

<ScrollView>
  <ScrollView horizontal={true}> // add this

    <FlatList />

  <ScrollView/>
<ScrollView>

answered Jun 15 '22 at 11:56

Kavidu Aloka Kodikara

299
5
19

score 0 · Answer 3 · answered Oct 07 '21 at 22:25

this happens because inside the FlatList there is a ScrollView too, what you can do is wrap your FlatList in a View to separate the Scroll's

InnerWrapper is only another View

you can wrapper you FlatList like this:

          <ScrollView
              onScroll={(e) => {
              onScroll(e);
              }}
              stickyHeaderIndices={[1]}
              contentContainerStyle={{ flexGrow: 1, justifyContent: 'center' }}
              style={{ width: '100%' }}
          >
              <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              
              {isLoading ? (
                <DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
              ) : (
                <InnerWrapper>
                <FlatList
                  data={data}
                  keyExtractor={(item, index) => String(index)}
                  renderItem={({ item }) => (
                    <View
                      style={{
                        flex: 0,
                        padding: 5,
                      }}>
                      <Card style={styles.card}>
                        <CardItem header style={styles.cardText}>
                          <Title style={styles.textSign}>{item.question}</Title>
                        </CardItem>
                        <CardItem style={styles.cardText1}>
                          <Body>
                            <Paragraph>{item.answer}</Paragraph>
                          </Body>
                        </CardItem>
                      </Card>
                    </View>
                  )}
                />
              </InnewWrapper>
              )}
              </View>
          </ScrollView>

did you wrap the two scrolls in separate views? – Remato Oct 08 '21 at 15:40 — Remato, Oct 08 '21 at 15:40

score 0 · Answer 4 · answered Oct 08 '21 at 06:10

As you don't have any other element don't use ScrollView. Use this code as flatlist will itself scroll at its elements.

              <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
              }}>
              
              {isLoading ? (
                <DotIndicator color="#4cd137" style={{ marginBottom: 200 }} />
              ) : (
                <FlatList
style={{flex:1}}
                  data={data}
                  keyExtractor={(item, index) => String(index)}
                  renderItem={({ item }) => (
                    <View
                      style={{
                        flex: 0,
                        padding: 5,
                      }}>
                      <Card style={styles.card}>
                        <CardItem header style={styles.cardText}>
                          <Title style={styles.textSign}>{item.question}</Title>
                        </CardItem>
                        <CardItem style={styles.cardText1}>
                          <Body>
                            <Paragraph>{item.answer}</Paragraph>
                          </Body>
                        </CardItem>
                      </Card>
                    </View>
                  )}
                />
              )}
              </View>

score 0 · Answer 5 · answered Jul 27 '23 at 13:54

I solved the issue very simple. my previous code

    <ScrollView>
      <Banner />
      <TerndCategories />
      <SponsoredProducts />
      <OnSaleProducts />
    </ScrollView>

where the <Banner />, <TerndCategories />, <SponsoredProducts /> and <OnSaleProducts /> are all Flatlist. now the code looks like this

    <FlatList
      data={[]}
      renderItem={() => <></>}
      ListHeaderComponent={
        <>
          <Banner />
          <TerndCategories />
          <SponsoredProducts />
          <OnSaleProducts />
        </>
      }
    />

score -2 · Answer 6 · answered Feb 08 '23 at 14:03

-2

just add this property in Flatlist

            scrollEnabled={false}

answered Feb 08 '23 at 14:03

Asad Kabir

7

How to put FlatList inside of the ScrollView in React-native?

6 Answers6