Get warning after update react : VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

Question

i'm working on a react native app and i updated my react version. I use Flatlist inside a ScrollView. I got this warning : VirtualizedLists should never be nested inside plain ScrollViews with the same orientation - use another VirtualizedList-backed container instead.

My component :

    return (
  <KeyboardAvoidingView behavior="padding" enabled style={styles.keyboardAvoidingView}>
    <SafeAreaView style={styles.keyboardAvoidingView}>
      <Header
        ..
        }}
        containerStyle={styles.headerContainer}
        rightComponent={{
          ...
        }}
      />
      <ScrollView style={styles.body}>
        <View style={styles.titleSection}>
          <Text style={styles.stepTitle}>Étape 1/3</Text>
          <Text style={styles.questionTitle}>Quel contact voulez-vous partager ?</Text>
        </View>
        <View>
          <FlatList
            data={contacts}
            renderItem={({ item, index }) => (
              <TouchableHighlight onPress={() => this.onItemClickHandler(index, item.id, item.firstName, item.lastName)} style={styles.touchableHighlight}>
                <View>
                  <ListItem
                    chevron={
                      (
                        <Icon
                          color={this.state.selectedIndex === index
                            ? `${defaultTheme.palette.white.main}`
                            : `${defaultTheme.palette.primary.dark}`}
                          name="chevron-right"
                          size={40}
                          type="material"
                        />
                      )
                    }
                    containerStyle={
                      this.state.selectedIndex === index
                        ? styles.selected
                        : styles.notSelected
                    }
                    leftElement={
                      (
                        <Icon
                          ...
                        />
                      )
                    }
                    title={`${item.firstName} ${item.lastName}`}
                    titleStyle={this.state.selectedIndex === index
                      ? [styles.titleStyle, styles.titleSelected]
                      : [styles.titleStyle, styles.defaultTitle]}
                  />
                </View>
              </TouchableHighlight>
            )}
            extraData={this.state.selectedIndex}
            keyExtractor={(item) => item.email}
            ListHeaderComponent={this.renderHeader(searchValue)}
            style={styles.flatListStyle}
            ListFooterComponent={this.renderFooter}
          />
          {
            (contacts.length > 0 && page > 0)
            && <CustomButton title="Afficher la suite" onPress={() => this.makeRemoteRequest()} loading={loading} disabled={loading} />
          }
        </View>
      </ScrollView>
    </SafeAreaView>
  </KeyboardAvoidingView>
);

Anas M.I Anas M.I · Accepted Answer · 2020-02-13T11:04:25

I had the same issue. See my code

What I did is the component which I wanted to render outside the flatlist I included that inside the ListHeaderComponent and removed the Scrollview component. Now its working fine without any warning.

Below is the previous code:

<ScrollView >
           <ReadCard data={this.state.data}/>
           <FlatList
                      data={this.state.data.related}
                       keyExtractor={this._keyExtractor}
                       renderItem={this._renderItem}
                       ItemSeparatorComponent={ListSeprator}
                  />
</ScrollView>

Below is the changed code without any warning:

<FlatList
               data={this.state.data.related}
               keyExtractor={this._keyExtractor}
               renderItem={this._renderItem}
               ItemSeparatorComponent={ListSeprator}
               ListHeaderComponent={
                    <ReadCard data={this.state.data}/>
               }
/>

Get warning after update react : VirtualizedLists should never be nested inside plain ScrollViews with the same orientation

1 Answers