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

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.

CodePudding user response：

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>

CodePudding user response：

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>