Boa tarde galera, estava estudando a biblioteca React Native Firebase a fim de aprender a trabalhar com uma integração do Firebase com React Native. Porém, estou enfrentando alguns problemas, o objetivo é adicionar os dados no Realtime Database por meio de uma tela e depois pegar os dados armazenados no banco de dados para apresentar na tela Home utilizando uma FlatList (algo que deveria ser simples), mas o grande o problema é que o aplicativo não renderiza os dados já armazenados quando é aberto pela primeira vez, ou seja quando inicia o App. Os dados são renderizados pela FlatList somente quando navego para a tela de adição e adiciono um novo item no banco de dados (assim ele renderiza os recém adicionados e os já existentes) ou quando realizo um "Refresh" no App (Dando um CTRL+S na IDE ou recarregando o App no emulador). Na tentativa de solucionar o problema fiz alguns testes e pelo que percebi A FlatList pega os dados armazenados na state quando ainda esta vazia, ou seja não recebeu os dados do firebase ainda, mesmo já tendo feito a requisição. Tentei utilizar funções assíncronas para tentar resolver, mas sem sucesso, assim, resolvi recorrer a vocês, vou disponibilizar o código mais básico que fiz (o que na minha concepção deveria funcionar). Já rodei o App no meu dispositivo físico, acreditando que fosse um problema do emulador, mas o problema persistiu. Segue o código utilizado originalmente:
import React, { useState } from 'react';
import styled from 'styled-components/native';
import database from '@react-native-firebase/database';
const Container = styled.SafeAreaView`
flex:1;
justify-content:center;
`;
const Texto = styled.Text`
margin:20px;
`;
const Lista = styled.FlatList``;
const Botao = styled.Button`
`;
const HomeScreen = (props) => {
const [vetor, setVetor] = useState([])
database().ref('users').on('value', (snapshot) => {
snapshot.forEach((childItem)=>{
vetor.push({
name:childItem.val().name,
idade:childItem.val().idade
})
})
setVetor(vetor)
})
const mudarTela = () => {
props.navigation.reset({
routes:[{name:'Tela2'}]
})
}
return (
<Container>
<Lista data={vetor} renderItem={({item})=><Texto>{item.name} idade: {item.idade}</Texto>}/>
<Botao title='Tela de Adição' onPress={()=>mudarTela()} />
</Container>
);
}
export default HomeScreen;
Cabe ressaltar que sou novo na FrameWork e este é um dos meus primeiros post's aqui, portanto perdoem algum erro que eu tenha cometido.