Цикл по дочерним базам данных и отображение каждого

Question

У меня есть этот код для отображения одного дочернего элемента, но возможно ли обойти все дочерние элементы и отобразить все сразу?Это структура моей базы данных Firebase ссылка на изображение , любая информация о том, как я могу это сделать, была бы отличной, я уже читал о отображении данных как JSON, но когда дело доходит до анализа кода черезфронтэнд я немного борюсь.Спасибо!

import React, { Component } from 'react';
import styles from './Styles.js';
import {
  Text,
  View,
  Image,
  Button,
  TouchableOpacity,
  Dimensions,
  ScrollView,
  StatusBar,
} from 'react-native';
import { LinearGradient } from 'expo';
import * as firebase from 'firebase';

export class Dog extends Component {

    componentDidMount(){
      firebase.database().ref('pets/1').once('value', (snapshot) => {''
      const snap = snapshot.val();
          this.setState({ 
            name: snap.name,
            petlocation: snap.location,
            type: snap.type,
            reward: snap.reward,
            time: snap.time,
            phone: snap.phone
          })
      });
    }

  constructor(props) {
    super(props);

    this.state = {
        pets: {
          name: '',
          petlocation: '',
          type: '',
          reward: '',
          time: '',
          phone: null,
      }
    };
  }

  render() {
    return (
      <View style={styles.locpetinfo}>
                <Image style={styles.locpetimg} source={require('assets/dog.jpg')} />
                <Text style={styles.locpetname}>{this.state.name}</Text>
                <Text style={styles.locpetpos}>{this.state.petlocation}</Text>
                <Text style={styles.locpettype}>{this.state.type}</Text>
                <Text style={styles.loctime}>{this.state.time}</Text>
                <Text style={styles.locbounty}>{this.state.reward}</Text>
                <Text style={styles.locbountysub}>REWARD</Text>
              </View>
    );
  }
}

export default Dog;

Answer 1

Сохранение значения снимка в состояние.

componentDidMount = async () => {

  await firebase.database().ref('pets').once('value', (snapshot) => {
    this.setState({ data: [].concat.apply([], snapshot.val()) });
  });
}

или без асинхронного / ожидающего

componentDidMount = () => {

  const petsRef = firebase.database().ref();

    petsRef
    .child('pets')
    .once('value')
    .then(snapshot => {
      this.setState({ data: [].concat.apply([], snapshot.val()) });
    })
    .catch(e => console.log(e))

}

Answer 2

@ rbxnt вы можете сохранить снимок в массиве и показать его одним снимком, как показано ниже

let pets = [];

const snap = snapshot.val();
firebase.database().ref('pets').once('value, (snapshot) => {
 pets.push(snap);
});