Tried to get frame for out of range index NaN (realtime database)

Question

I'm trying to render some rows from firebase database, I'm getting this error:

TaskQueue: Error with task : Invariant Violation: Tried to get frame for out of range index NaN

  const { currentUser } = firebase.auth();
    var userfavorites = firebase.database().ref(`/users/${currentUser.uid}/favorites/`);
    userfavorites.once('value').then(snapshot => {
      this.setState({ userfav: snapshot.val() })
    })

...

  <FlatList
    data={this.state.userfav}
    renderItem={({ item }) => (
      <Text>{item.favdata}</Text>
    )}
  />

Answer 1

I came across this error, I had a PHP back-end and trying to get json_encoded data into a FlatList.

Problem: The REST endpoint was returning an object eg

{"Total_Excavator":2,"Active_Excavator":2,"Total_load":6804}

Solution: Fixed it to return an array rather eg

[{"Total_Excavator":2,"Active_Excavator":2,"Total_load":6804}]

Take note of the Square Brackets. I used $data[] = json_encode($excavatorArray) instead of $data = json_encode($excavatorArray) . Hope it helps someone one day

Answer 2

I had the same issue, it seems this problem is the reason of the object names. In the image below you can see that as soon as you fetch snapshot from Firebase endpoint it comes with the id which is not recognized by React Native. And react acts like it's empty obj.

All you have to do is map the items of the object after fetching it like example below,

const fbObject = snap.val();
const newArr = [];
Object.keys(fbObject).map( (key,index)=>{
    console.log(key);
    console.log("||");
    console.log(index);
    newArr.push(fbObject[key]);
});