Sectionlist not loading all item at once

[sandeep14]

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(R) Core(TM) 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]

I am facing the same situation as well.
My configuration is similar to the questioner except I'm using react-navigation now:

"react-native": "0.64.3",
"@react-navigation/bottom-tabs": "^5.11.10",
"@react-navigation/drawer": "^5.12.5",
"@react-navigation/material-top-tabs": "^5.3.15",
"@react-navigation/native": "^5.9.4", 
"@react-navigation/stack": "^5.14.4",

I also use Sectionlist on other screens, but this issue only happened on a specific screen.

const listData = [
  { title: 'testA', data: [{ id: 'id-1', title: 'title-1' }] },
  {
    title: 'testB',
    data: [
      { id: 'id-2', title: 'title-2' },
      { id: 'id-3', title: 'title-3' },
    ],
  },
  ...
];
console.log(`listData`, listData)
  return (
    <SafeAreaView style={styles.container}>
      <SectionList
        removeClippedSubviews={false}
        sections={listData}
        style={styles.list}
        renderItem={({ item }): JSX.Element => {
          console.log(`item`, item);
          return (
            <TouchableOpacity
              onPress={(): void => {
                onChange(item.id);
                navigation.goBack();
              }}
            >
              <View style={{ alignSelf: 'stretch' }}>
                <View style={styles.optionLine}>
                  <Text style={item.id === categoryId ? styles.optionLineTitleSelected : styles.optionLineTitle}>
                    <CustomizedFontText>{item.title}</CustomizedFontText>
                  </Text>
                </View>
              </View>
            </TouchableOpacity>
          ) as JSX.Element;
        }}
        renderSectionHeader={({ section: { title } }): JSX.Element | null => (
          <Text style={styles.listHeader}>
            <CustomizedFontText>{title || null}</CustomizedFontText>
          </Text>
        )}
        keyExtractor={(item): string => item.id}
        ItemSeparatorComponent={(): JSX.Element => <DashBoardListSeparator />}
      />
    </SafeAreaView>
  ) as JSX.Element;

Base on the console.log, I realize the item render function has been called a few times when Sectionlist is not rendering all items.

[anastely]

@Ray-Frost Did You fix it?

[ghost]

same issue

[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: react-navigation/react-navigation#10413 so upgrading @react-navigation/drawer to 6.3.3 fixed this issue for me.

[GeorgeHop]

Hi guys I encountered the same issue in one of my projects. After some while of digging and googling I find a solution inside the docs... First you should check if you have looped animations because they may block your list to render all rows.
Checkout this link https://reactnative.dev/docs/animated#loop
After adding this isInteraction: false like on screen below this issue was fixed!

Hopefully it will helps someone! Cheers.

[Krunal-K-SimformSolutions]

Has anyone have any idea how to resolve the Section list not loading all items at once issue because I am facing some time same issue.
Output screenshot ->
http://simformsolutions.s3.amazonaws.com/OrderDetailScreen.tsx__tudu_reactnative_2022-11-10_12-31-11.png

Also, I am trying to define initialNumToRender props but not resolved & I am not used to drawer navigation.
For React Navigation

"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/core": "^6.3.0",
"@react-navigation/material-top-tabs": "^6.3.0",
"@react-navigation/native": "^6.0.12",
"@react-navigation/native-stack": "^6.9.1",
"@react-navigation/routers": "^6.1.2",

[bMoki]

Has anyone have any idea how to resolve the Section list not loading all items at once issue because I am facing some time same issue. Output screenshot -> http://simformsolutions.s3.amazonaws.com/OrderDetailScreen.tsx__tudu_reactnative_2022-11-10_12-31-11.png

Also, I am trying to define initialNumToRender props but not resolved & I am not used to drawer navigation. For React Navigation

"@react-navigation/bottom-tabs": "^6.4.0",
"@react-navigation/core": "^6.3.0",
"@react-navigation/material-top-tabs": "^6.3.0",
"@react-navigation/native": "^6.0.12",
"@react-navigation/native-stack": "^6.9.1",
"@react-navigation/routers": "^6.1.2",

In your case since you have some content before the SectionList it might be just the height of it, try changing it to 70% and see if the problem still remains. In my case this was the problem.
style= {{ height: '70%' }}

[github-actions]

This issue is waiting for author's feedback since 24 days. Please provide the requested feedback or this will be closed in 7 days.

[sandeep14]

I have managed it by using react-native-section-list-get-item-layout . assignned height for each items
maxToRenderPerBatch={6}
removeClippedSubviews={false}
initialNumToRender={4}
windowSize={5}
getItemLayout={this.getItemLayout.bind(this)}

getItemLayout = sectionListGetItemLayout({

    getItemHeight: (rowData, sectionIndex, rowIndex) => this.done(rowData, sectionIndex, rowIndex), //sectionIndex==0?131:sectionIndex==1?205:GlobalVeriable.foodthisVal.props.fooddata[sectionIndex][rowIndex].itemHeight,
   // getSeparatorHeight: () => 0,
    getSectionHeaderHeight: () => 60,
    //getSectionFooterHeight: () => 0,
    //listHeaderHeight: 0
})

done(rowData, sectionIndex, rowIndex){

return height; // height is static one
}