React Native Flatlist renders only one row

Question

I am pretty new to web app development so please help me out. Flatlist only renders one item on my application but returns all the records on the console.log. Below is what returns on my console.log on the flatlist. It completely returns all of the rows that are in my database but only returns one row when it is rendered by flatlist.

Array []
Array [
  Object {
    "busLineName": "Saint Anthony",
    "busNumber": "6326",
    "key": "02-20-2020-1",
  },
]
Array [
  Object {
    "busLineName": "Saulog Transit",
    "busNumber": 5109,
    "key": "02-20-2020-2",
  },
]
Array [
  Object {
    "busLineName": "Lucky Seven",
    "busNumber": 8852,
    "key": "02-20-2020-3",
  },
]
Array [
  Object {
    "busLineName": "Kellen Transit",
    "busNumber": "4016",
    "key": "02-20-2020-4",
  },
]
Array [
  Object {
    "busLineName": "Golden Dragon Bus Lines",
    "busNumber": "1095",
    "key": "02-20-2020-5",
  },
]

Here is my code:

import React, { useState } from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  ScrollView,
  ListItem,
} from "react-native";


import * as firebase from "firebase";
import { concat } from "react-native-reanimated";

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      violations: [],
    };
  }
  componentDidMount() {
    this._isMounted = true;
    const ref = firebase.database().ref("violations").orderByKey();
    ref.on("value", (snapshot) => {
      snapshot.forEach((child) => {
        this.setState({
          violations: [
            {
              key: child.key,
              busLineName: child.val().busLineName,
              busNumber: child.val().busNumber,
            },
          ],
        });
      });
    });
  }

  componentWillUnmount() {
    const ref = firebase.database().ref("violations").orderByKey();
    ref.off("value");
  }


  render() {
    return (
      <View style={styles.container}>
        <FlatList
          data={this.state.violations}
          keyExtractor={(item) => {
            return item.key;
          }}
          renderItem={({ item }) => (
            <Text>
               {console.log(this.state.violations)}
              {item.key}
              {item.busLineName}
              {item.busNumber}
            </Text>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    borderRadius: 4,
    borderColor: "black",
    borderWidth: 1,
    width: 100,
    height: 60,
    backgroundColor: "grey",
    textAlign: "center",
  },
  text: {
    textAlignVertical: "center",
    textAlign: "center",
    color: "black",
  },
});

Here is my database

This is what flatlist renders

Answer 1

Try this.

public componentDidMount() {
  this._isMounted = true;
  const ref = firebase.database().ref("violations").orderByKey();
  ref.on("value", (snapshot) => {
    snapshot.forEach((child) => {
      if (this.state.violations.length === 0) { // check if your array is empty
        this.setState({
          violations: [
            {
              key: child.key,
              busLineName: child.val().busLineName,
              busNumber: child.val().busNumber
            }
          ]
        });
        return;
      }
      const cloneViolations = cloneDeep(this.state.violations); // Clone your this.state.violations to another const.
      const newObj = { // Created a new object to be pushed to your array.
        key: child.key,
        busLineName: child.val().busLineName,
        busNumber: child.val().busNumber
      };
      cloneViolations.push(newObj); // Pushed 'newObj' array into 'cloneViolations'.
      this.setState({ violations: cloneViolations }); // set it to other state.
    });
  });
}