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

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!

On Android, you must not initialise your FlatList stickyHeaderIndices with empty array.

Instead, when your state is not loaded yet, provide FlatList data with some initial data and provide stickyHeaderIndices with [0]

Example code as below

let [data, stickyIndices] = someAPIToGetYourData()
...
...
...
// if your data is not finished loading yet
if (data.length === 0) {
  // create not-empty array
  data = getInitialNotEmptyData()
  // add not-empty index
  headerIndexList = [0]
}

return (
  <SafeAreaView>
    <FlatList
      data={data}
      stickyHeaderIndices={headerIndexList /* This must not be empty */ }
      renderItem={item => renderYourItem(item)}
    />
  </SafeAreaView>
)

Hope this help!

I needed kill the FlatList to fix this error, like this:

    <View>  
      { this.state.data.length > 0 &&   
        <FlatList
          showsVerticalScrollIndicator={false}
          refreshing={false}
          onRefresh={() => this.onRefresh()}
          data={this.state.data}
          extraData={this.state}>}
    </View>

Hope this helps!

LayoutAnimation causes a similar issue, not only with Flatlist but any kind of lists, check if you are using it in your app and if you have UIManager.setLayoutAnimationEnabledExperimental(true) on your top component, removing it might fix your issue, but will disable the layoutAnimations.

You might find more information here and here

Please improve your function.

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