Sectionlist not loading all item at once

Description

I am using section list with initialNumToRender = All data length in all section, but it not rendering all item at once

sometime it render half or some time it render more and showing extra scroll

need help of this

Version

0.64

Output of react-native info

OS: macOS 11.5.2 CPU: (8) x64 Intel® Core™ i5-8279U CPU @ 2.40GHz Memory: 17.10 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 12.22.6 - /usr/local/bin/node Yarn: Not Found npm: 6.14.15 - /usr/local/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.2 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.5, DriverKit 20.4, macOS 11.3, tvOS 14.5, watchOS 7.4 Android SDK: Not Found IDEs: Android Studio: 3.5 AI-191.8026.42.35.5900203 Xcode: 12.5.1/12E507 - /usr/bin/xcodebuild Languages: Java: 11.0.12 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: 16.13.1 => 16.13.1 react-native: 0.64.0 => 0.64.0 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

It replicate with any section list with more items, In my case case total 20 section are there and total 142 items are there

Snack, code example, screenshot, or link to a repository

<SectionList sections={this.props.OrderData} ref={(s) => (this.sectionList = s)} stickySectionHeadersEnabled={true} removeClippedSubviews={false}

                    //maxToRenderPerBatch={20}
                   
                    
                    scrollEnabled={true}
                   // onScrollToIndexFailed={this.scrollToIndexFailed.bind(this)}
                  
                  
                    onScrollToIndexFailed={info => {
                        const wait = new Promise(resolve => setTimeout(resolve, 500));
                        wait.then(() => {
                           // alert(JSON.stringify(info))
                          flatList.current?.scrollToIndex({ index: info.index, animated: false });
                        });
                      }}

                      initialNumToRender={this.props.countofData}

                   // getItemLayout={this.getItemLayout.bind(this)}
                    scrollEventThrottle={1000}
                   // ListFooterComponent={this.ItemSeprator}
                      
                    onEndReached={this.props.handleloadMore}
                    onEndReachedThreshold={0.01}
                    style={{ flex:0, top: this.screenHeight <= 480 ? 230 : 255, bottom: 5, width: '100%',position:'absolute' }}
                    keyExtractor={(item, index) => index}

                    renderSectionHeader={({ section }) => ()}
                  renderItem={this._renderItem}
                  />

[Ray-Frost]

@anastely I temporarily skipped it by setting initialNumToRender, perhaps you could try it.

[kptp]

I had the same issue where sometimes a section list would render only the first 10 items (section headers + footers included). Eventually I found out that this happened because react native’s InteractionManager.runAfterInteractions was not triggering. This, in my case, was caused by @react-navigation/drawer leaking interaction handles. This was fixed in PR: https://github.com/react-navigation/react-navigation/pull/10413 so upgrading @react-navigation/drawer to 6.3.3 fixed this issue for me.