React Native. Filter FlatList - error "index=10 count 0"

Question

My task is to filter some array and set it to FlatList.

My filter function is:

updateInvoiceList = (text) => {
  let invoiceList = [...this.state.baseInvoiceList];
    invoiceList = invoiceList.filter(el => {
     return el.name.toLowerCase().includes(text.toLowerCase())
    });
  this.setState({invoiceList})
}

After filtering, I provide state.invoiceList to FlatList and everything works correctly. But, when I set some symbol which does not exist in my array, for example "!", the function clears the array and it still behaves correctly. When I remove the symbol "!", I get an error screen with:

 index=10 count=0
addInArray
    ViewGroup.java:5235
addViewInner
    ViewGroup.java:5128
addView
    ViewGroup.java:4935
addView
    ReactViewGroup.java:452
addView
    ViewGroup.java:4875
addView
    ReactViewManager.java:269
addView
    ReactViewManager.java:36
manageChildren
    NativeViewHierarchyManager.java:346
execute
    UIViewOperationQueue.java:227
run
    UIViewOperationQueue.java:917
flushPendingBatches
    UIViewOperationQueue.java:1025
access$2600
    UIViewOperationQueue.java:46
doFrameGuarded
    UIViewOperationQueue.java:1085
doFrame
    GuardedFrameCallback.java:29
doFrame
    ReactChoreographer.java:166
doFrame
    ChoreographerCompat.java:84
run
    Choreographer.java:964
doCallbacks
    Choreographer.java:790
doFrame
    Choreographer.java:721
run
    Choreographer.java:951
handleCallback
    Handler.java:883
dispatchMessage
    Handler.java:100
loop
    Looper.java:214
main
    ActivityThread.java:7356
invoke
    Method.java
run
    RuntimeInit.java:492
main
    ZygoteInit.java:930

What did I do wrong?

Answer 1

I had the exact same issue with my code, inside a Flatlist and only showing up on Android. I've managed to solve it as follows:

My FlatList had

stickyHeaderIndices={this.state.items[1]}

but apparently the List was loading that stickyHeader ahead of its initialization. From here, the solution consists simply in handling the case in which that item is not initialized yet.

stickyHeaderIndices={this.state.items.length > 0 ? [1] : [0]}

Hope this helps! The solution is pretty straightforward. Debugging it can be a real pain, tho!