Data obtained from Firebase Realtime Database in React Native using Hooks is not displayed on the screen

Question

I started using Hooks in React Native recently and I'm trying to get the data from Firebase Realtime Database and render it in FlatList. The data is being displayed on the console, in object format, but it is not working, it is not being rendered on the screen. What am I doing wrong? How do I make it work correctly?

My code:

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, FlatList } from 'react-native';

import firebase from '@firebase/app';
import '@firebase/database';

export default function QuestList({ navigation }) {
  const title = navigation.getParam('title');
  const [data, setData] = useState([]);

  useEffect(() => {
      const db = firebase.database();
      db.ref('/questionnaires/')
        .on('value', snapshot => {
          console.log(snapshot.val());
          const data = snapshot.val();
        });
  }, []);

  return (<FlatList 
    data={data}
    renderItem={
      ({ item, index }) => (<View>
        <Text index={index}>{item.title}</Text>
      </View>)
    }
    keyExtractor={item=>item.id}
    numColumns={2}
    showsVerticalScrollIndicator={false}
    />
  );
}

SiddAjmera · Accepted Answer · 2021-01-11 01:36:25Z

1

You're probably missing a setData call in your useEffect

useEffect(() => {
  const db = firebase.database();
  db.ref('/questionnaires/')
    .on('value', snapshot => {
      const response = snapshot.val();
      setData(response);
    });
}, []);

edited Jan 11, 2021 at 1:36

answered Jan 10, 2021 at 3:56

SiddAjmera

39.6k7 gold badges77 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Henry Over a year ago

Without async it prints data only on the console, but I can't display it on the screen

Collectives™ on Stack Overflow

Data obtained from Firebase Realtime Database in React Native using Hooks is not displayed on the screen

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related