Android - IndexOutOfBoundsException using SectionList

[bviebahn]

Description

I've had this error come up in Firebase Crashlytics a few times now:

Fatal Exception: java.lang.IndexOutOfBoundsException: index=68 count=67
       at android.view.ViewGroup.addInArray(ViewGroup.java:6213)
       at android.view.ViewGroup.addViewInner(ViewGroup.java:6106)
       at android.view.ViewGroup.addView(ViewGroup.java:5903)
       at com.facebook.react.views.view.ReactViewGroup.addView(ReactViewGroup.java:464)
       at android.view.ViewGroup.addView(ViewGroup.java:5843)
       at com.facebook.react.views.view.ReactClippingViewManager.addView(ReactClippingViewManager.java:38)
       at com.facebook.react.views.view.ReactClippingViewManager.addView(ReactClippingViewManager.java:19)
       at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:533)
       at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:217)
       at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:915)
       at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
       at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java:47)
       at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1086)
       at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
       at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
       at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
       at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1061)
       at android.view.Choreographer.doCallbacks(Choreographer.java:845)
       at android.view.Choreographer.doFrame(Choreographer.java:775)
       at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1048)
       at android.os.Handler.handleCallback(Handler.java:938)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loopOnce(Looper.java:226)
       at android.os.Looper.loop(Looper.java:313)
       at android.app.ActivityThread.main(ActivityThread.java:8582)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:563)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1133)

It only happens on Android, mostly Samsung devices. Unfortunately I can't reproduce it. I have found a few other issues describing the same error, but they are quite old and don't have any answer describing how to fix it. See: https://github.com/facebook/react-native/issues/3042 https://github.com/facebook/react-native/issues/11825 https://github.com/facebook/react-native/issues/16411

One of the answers mentions it might have to do with the removeClippedSubviews prop, but I'm not using that. This is how I use the SectionList:

<SectionList
    ref={innerRef}    
    sections={groups}
    renderItem={renderItem}
    ListHeaderComponent={ListHeaderComponent}
    ListFooterComponent={ListFooterComponent}
    ItemSeparatorComponent={ItemSeperator}
    renderSectionHeader={renderSectionHeader}
    stickySectionHeadersEnabled={false}
    keyExtractor={({ sku }) => sku}
    windowSize={9}
    testID={testID} />

I also use LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut); when items are being removed. Since this is still experimental on Android I'll just try to remove the animation and also the windowSize prop, as I don't have any other idea what might be causing this.

Any help would be appreciated

Version

0.66.1

Output of npx react-native info

System: OS: macOS 12.2.1 CPU: (8) arm64 Apple M1 Pro Memory: 142.89 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node Yarn: 1.22.15 - ~/.nvm/versions/node/v16.13.2/bin/yarn npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm Watchman: Not Found Managers: CocoaPods: 1.11.2 - /opt/homebrew/bin/pod SDKs: iOS SDK: Platforms: DriverKit 21.2, iOS 15.2, macOS 12.1, tvOS 15.2, watchOS 8.3 Android SDK: Not Found IDEs: Android Studio: 2021.1 AI-211.7628.21.2111.8139111 Xcode: 13.2.1/13C100 - /usr/bin/xcodebuild Languages: Java: 11.0.14 - /usr/bin/javac npmPackages: @react-native-community/cli: Not Found react: ^17.0.2 => 17.0.2 react-native: ^0.66.1 => 0.66.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

Steps to reproduce

Not sure, it might have to do with adding/removing items from a SectionList.

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

No response

[bviebahn]

I also just found this, so it might actually have to do with LayoutAnimation. https://github.com/facebook/react-native/issues/17118

[github-actions[bot]]

This issue is stale because it has been open 180 days with no activity. Remove stale label or comment or this will be closed in 7 days.

[DavidFaermanPendo]

+1

[Brumor]

+1

[danielmark0116]

Did any of you guys use the stickyHeaderIndices prop on FlatList? I think it might be a reason for my case

[lishiyun]

+1

[FadiAboMsalam]

any update 🤔

[danielmark0116]

In my case what helped was to render the FlatList conditionally and I also changed the way in which I handle the sticky header indices (can't recall now as it was some time ago, but the value is dynamic).

So far we have no more bugs connected with it on prod

[pjc0247]

removing stickyHeaderIndices solves my problem. (but i need this..)