CODEWITHSUNDEEP
javascriptreactjsfirebasereact-nativefirebase-realtime-database
Amrita Venkatraman
Amrita Venkatraman

Reputation: 53

Unable to read data from Firebase Realtime Database in React Native

I am working on a simple React Native app to read and write data from a Firebase database. My read and write permissions in Firebase have been set to true:

{
  "rules": {
    ".read": true,  
    ".write": true,  
  }
}

Here are my relevant files:

App.js

import React from 'react'
import {View, StyleSheet, Button} from 'react-native'
import * as firebase from 'firebase'
import RootStackNavigator from './navigation/RootNavigation'

export default class App extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      isLoadingComplete: false
    }
    var firebaseConfig = {
      apiKey: "xxxxxxx",
      authDomain: "testproject-9d0bc.firebaseapp.com",
      databaseURL: "https://testproject-9d0bc-default-rtdb.firebaseio.com",
      projectId: "testproject-9d0bc",
      storageBucket: "testproject-9d0bc.appspot.com",
      messagingSenderId: "1003049293166",
      appId: "1:1003049293166:web:1df37fd6d181cf895cdd7f"
    };

    if (!firebase.apps.length) {
    firebase.initializeApp(firebaseConfig)
    } else {
      firebase.app()
    }
   }

  render() {
    return (
    <View style={styles.container}>
      <RootStackNavigator/>
    </View>
    )
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

RootStackNavigation.js

import React from 'react';
import { createAppContainer, StackNavigator } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from '../src/screens/HomeScreen';

const RootStackNavigator =  createStackNavigator(
  {
      screen: HomeScreen
  },
  {
    initialRouteName:"screen", // first component that should be displayed
    defaultNavigationOptions: {
      title: "App" 
    }
  }
);

export default createAppContainer(RootStackNavigator)

HomeScreen.js

import React from "react";
import { Text, StyleSheet, View, Button, TouchableOpacity } from "react-native";
import * as firebase from "firebase";
const HomeScreen = (
  props
) => {
  function getData() {
    firebase
      .database()
      .ref("people/")
      .on("value", (snapshot) => {
        const age = snapshot.val().age;
        console.log("Age: " + age);
      });
  }

  return (
    <View>
      <Text>Hello this is the home screen</Text>
      <Button title="Get Data" onPress={getData} />
    </View>
  );
};

const styles = StyleSheet.create({
  text: {
    fontSize: 30,
  },
});

export default HomeScreen;

My firebase database looks like this (all data was manually added through the firebase website)and I want to be able to print out these items after pressing the "Get Data" button to the console as shown in my getData function in HomeScreen.js

Firebase Database

However, my code in getData does not work and nothing prints out to my console. What am I missing here?

Upvotes: 0

Views: 703

Answers (2)

Amrita Venkatraman
Amrita Venkatraman

Reputation: 53

Figured out my issue. As you can see in my firebase database, the way I was accessing my data was wrong. If I wanted to get the age of "dad", I should have called snapshot.val().dad.

Upvotes: 0

Mukarram Javid
Mukarram Javid

Reputation: 89

Kindly modify this in your code

firebase.database.ref("people").on("value", snapshots => {
    let peoples = [];
    snapshots.forEach((snapshot) => {
   peoples.push(snapshot.val().age);
    console.log(snapshot.val().age);
    });
   // here you can set this Array
  // setPeople(peoples)

Upvotes: 1

Related Questions