How do I get data from firebase realtime databese with React Native?

Question

I'm trying to get a data firebase realtime database. I can show data with console.log() but I cannot show in Flat list. I tried different ways to solve this problem. But, I could not find any certain solution. Here, my JSON tree in firebase:

Here, my code:

const NotesList = (props) => {

  const { colors } = useTheme();
  const styles = customStyles(colors);

  const user = auth().currentUser
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(false);

  const getData = () => {
    firebase.database().ref(`notes/`).on('value', function (snapshot) {
        console.log(snapshot.val())
    });
  }

  useEffect(() => {
    setTimeout(() => {
      setData(getData);
      setLoading(true);
    }, 1000);
  }, []);
  
  const renderItem = ({ item }) => {
    return (
      <View style={{ marginRight: 10, marginLeft: 10 }}>
        <TouchableOpacity>
          <NoteCard title={item.noteTitle} icerik={item.noteDetails} date={item.timestamp} />
        </TouchableOpacity>
      </View>
    );
  };
  const split = () => {
    let icerik = data.map((item, key) => item.icerik);
    return icerik.slice(0, 1) + '...';
  };
  return (
    <View style={styles.container}>
      <StatusBar barStyle="light-content" />
      
      <NoteSearchBar />
      {!loading ? (
        <View style={{ alignItems: 'center' }}>
          <ActivityIndicator color="#ff5227" />
        </View>
      ) : (
          <FlatList
            data={data}
            numColumns={2}
            renderItem={renderItem}
            keyExtractor={(item, index) => index.toString()}
          />
        )}
      <TouchableOpacity
        style={styles.addButton}
        onPress={() => props.navigation.navigate('AddNote')}>
        <Plus width={40} height={40} fill="white" margin={10} />
      </TouchableOpacity>
    </View>
  );
};

I tried many different ways, but no suggestions solved the problem. I would be glad if you could help.

Answer 1

I found solution and I want to share it with you guys. I kept the data from firebase as a child at a new value, then I put it in setData. In this way, I can display the data in the flat list.

 const getData = () => {
firebase.database().ref(`notes/`).on('value', snapshot => {
    let responselist = Object.values(snapshot.val())
    setData(responselist)
    console.log(snapshot.val())
    setLoading(true);
});
}

useEffect(() => {
  getData();
}, []);

Also, while firebase realtime DB was working, a new method called Object method helped when taking child values in the JSON tree.