How to resolve the Virtualized Lists warning with multiple Flatlists within a scroll

Viewed 585

I have been working my way through legacy views within an app - resolving the issues of FlatLists within a ScrollView component casuing the resulting Virtualised Lists error that is displayed.

I have 5 affected pages - first 3 only had 1 flatlist in the view - so was easy enough to split the urrounding code into flatlist header and footer assets. However I'm not sure what to do in terms of having 2 or more flatlists - how do i apprach the layout in thsi scenario - so there is only 1 scroll?

I may be missing something very simple but need a nudge please!

here is the view code:

<View style={[PRStyles.IRContainer]} >
        <StatusBar barStyle="light-content" />
        <View style={PRStyles.header}>
          <FixedHeader backButton={true} navScreen='HomeViewContainer' />
        </View>
        
        <View style={PRStyles.IRBody}>
          <ScrollView
            refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh} />}>
            <KeyboardAvoidingView> 
            <TitleHeader sectionLocaleTxt='Duty Record' sectionTxt='' sectionDesc='End of shift duty Record.' sectionHyphen={false}  />
            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowTitle}>{this.props.auth.checkedInVenueName}</Text>
              <Text style={FormStyles.PrRowDate}>{this.getCurrentDate()}</Text>
            </View>
            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowSubTitle}>General Manager / Licence Holder:</Text>
              <View style={FormStyles.PrTable}>
                <View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >{this.state.licenceHolder}</Text></View>
              </View>
            </View>

            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowSubTitle}>Door Staff (<Text style={FormStyles.PrRowCount}>{this.state.doorStaffCount}</Text> total)</Text>
              <View style={FormStyles.PrTable}>
                <FlatList
                  scrollEnabled={true}
                  data={this.state.rotaRecords}
                  keyExtractor={(item, index) => index.toString()}
                  ListEmptyComponent={this._listStaffEmptyComponent}
                  renderItem={this._renderDoorStaffItem}
                />
              </View>

            </View>
            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowSubTitle}>Numbers:</Text>
              <View style={FormStyles.PrTable}>
                <View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total In <Text style={ FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalIn}</Text></Text></View>
                <View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Total Out<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalOut}</Text></Text></View>
                <View style={FormStyles.prRowStrip}><Text style={FormStyles.prRowStripText} >Overall Difference<Text style={FormStyles.prRowStripColon}>:</Text> <Text style={FormStyles.prRowStripOrText}>{this.state.totalDifference}</Text></Text></View>
              </View>

            </View>

            <View style={FormStyles.PrRow}>
              <Text style={FormStyles.PrRowSubTitle}>Door Counts:</Text>
              <FlatList
                  scrollEnabled={true}
                  data={this.state.countRecords}
                  keyExtractor={(item, index) => index.toString()}
                  ListEmptyComponent={this._listDoorCountEmptyComponent}
                  ListHeaderComponent={this._listDoorCountHeaderComponent}
                  renderItem={this._renderDoorCountItem}
                />
          </View>

            <View style={[FormStyles.form, FormStyles.PrRow, {marginTop:15, paddingTop:0, borderBottomWidth:0} ]}>
              <Text style={ModalStyles.formTop}><Text style={[ModalStyles.required, ]}>*</Text>Required Field</Text>
              <Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>1. Customer Comments:</Text>

              <View style={FormStyles.textInputBlock}>
                <TextInput
                  placeholder="Enter Comments"
                  numberOfLines={4}
                  onChangeText={val => this.setState({ comments: val})}
                  value={this.state.comments}
                  multiline
                  style={{minHeight: 280, height: 'auto', textAlignVertical: 'top'}}
                />
              </View>

              <Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>2. Duty Manager Name<Text style={ModalStyles.required}>*</Text> :</Text>

              <View style={FormStyles.textInputBlock}>
                <TextInput
                  ref='signatureName'
                  placeholder="Please Print Name"
                  style={FormStyles.textInputText}
                  autoCorrect={false}
                  returnKeyType='done'
                  value={this.state.signatureName}
                  onChangeText={(text) => this.setState({signatureName:text})}
                />
              </View>
              <Text style={[FormStyles.formLabel, FormStyles.formlabelFirst ]}>3. Duty Manager Signature: <Text style={ModalStyles.required}>*</Text></Text>
                  <Text style={[FormStyles.formLabelSub, FormStyles.formLabelSubHigh, FormStyles.superHighLight ]}>Note: PRESS BLUE SAVE BUTTON after applying Signature</Text>
              <View style={[FormStyles.textInputBlock, this.isSignatureAdded() && FormStyles.signatureBlock ]}>
                {this.signatureBlock()}

              </View>
            </View>

            {submitButton}
           </KeyboardAvoidingView>
          </ScrollView>
        </View>
      </View>
1 Answers

This is the most common error when working with scroll view and flat list.

To prevent the error cause, we have to manage our views inside a single flat list and put other components in the list header component and list footer component in an efficient way as we desire.

<FlatList
    data={this.state.countRecords}
    renderItem={(item) => {
        return (
            // Your flat list item goes here..
        )
    }}
    ListHeaderComponent={
        // Content above the list goes here..
    }
    ListFooterComponent={
        // Content below the list should goes here..
    }
/>

You can still check the below link for more understanding.

FlatList Example with Custom Header and Custom Footer

Related