Develop Reference

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
However, my code in getData does not work and nothing prints out to my console. What am I missing here?

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)

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.

Element type error on a firebase-React Native project

Im new at coding and am making a firebase-react native app. What I want to do know is the app to show users the login screen if they are not login yet and show the app screen if they are log in but when I try to run the app, it gives me the error shown in the image below. What Im doing wrong? Thank you.
/**
* #format
*/
import React, { Component } from 'react'
import {
AppRegistry,
StyleSheet,
Text,
View,
Navigator
} from 'react-native';
import {name as appName} from './app.json';
import App from './component/App'
import * as firebase from 'firebase'
import Login from './component/Login'
//import Firebase from './lib/Firebase'
const firebaseConfig = {
apiKey: "dhshdsjkfbsdjkvbjksdvbjksd",
authDomain: "dhshdsjkfbsdjkvbjksdvbjksd",
databaseURL: "dhshdsjkfbsdjkvbjksdvbjksd",
projectId: "dhshdsjkfbsdjkvbjksdvbjksd",
storageBucket: "dhshdsjkfbsdjkvbjksdvbjksd",
messagingSenderId: "dhshdsjkfbsdjkvbjksdvbjksd",
appId: "dhshdsjkfbsdjkvbjksdvbjksd",
measurementId: "dhshdsjkfbsdjkvbjksdvbjksd"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
export default class dribbleAppUi1 extends Component {
constructor(props){
super(props)
this.state = {
initialView : null,
userLoaded: false
}
this.getInitialView()
this.getInitialView = this.getInitialView.bind(this)
}
getInitialView (){
firebase.auth().onAuthStateChanged((user) => {
let initialView = user ? 'App' : 'Login'
this.setState({
userLoaded: true,
initialView
})
})
}
configureScene(route) {
if(route.sceneConfig) {
return route.sceneConfig
} else {
return ({
...Navigator.sceneConfigs.HorizontalSwipeJumpFromRight,
gestures: {}
})
}
}
renderScene(route, navigator){
var globalProps = {navigator}
switch(route.id){
case 'App':
return (
<App navigator={navigator} />
)
case 'Login':
return (
<Login navigator={navigator} />
)
}
}
render() {
if(this.state.userLoaded) {
return (
<Navigator
initialRoute={{
id: this.state.initialView
}}
renderScene={this.renderScene}
configureScene={this.configureScene}
/>
);
}else {
return null
}
}
}
AppRegistry.registerComponent('Tiismo', () => dribbleAppUi1);
Im trying to make a project with firebase and react native. For now, Im trying to get users to login page if there are no login but I'm getting the error in the image below. What Im doing wrong? Thank You.

You cannot simply return null in render. Try this.
if(this.state.userLoaded) {
return (
<Navigator
initialRoute={{
id: this.state.initialView
}}
renderScene={this.renderScene}
configureScene={this.configureScene}
/>
);
}else {
return (<Text>Loading</Text>)
}

React navigation doesnt navigate

I am developing an application and using the listener onAuthStateChanged from Firebase in my AuthenticationLoadingScreen so I can redirect the user based on this state, however, it just opens a white page and doesn't open the home screen.
EDIT: Someone says that maybe the app.js is the problem so I added it here
import HomeScreen from '../screens/HomeScreen'
import AuthScreen from '../screens/AuthScreen'
// Implementation of HomeScreen, OtherScreen, SignInScreen, AuthLoadingScreen
// goes here.
const AppStack = createStackNavigator({ Home: HomeScreen});
const AuthStack = createStackNavigator({ Home: HomeScreen });
export default createAppContainer(createSwitchNavigator(
{
AuthLoading: AuthScreen,
App: AppStack,
Auth: AuthStack
},
{
initialRouteName: 'AuthLoading',
}
));
export default class AuthScreen extends React.Component {
constructor(props){
super(props);
}
componentDidMount = ()=>{
firebase.auth().onAuthStateChanged(user => {
this.props.navigation.navigate(user ? 'App' : 'Auth');
});
}
render() {
return (
<ImageBackground
source={require('../assets/images/AuthScreenBackground.png')}
style={styles.ImageBackground}/>
);
}
}
Here is the App.js code:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import AppNavigation from './navigation/AppNavigation.js'
import * as firebase from 'firebase'
var config = {
};
firebase.initializeApp(config);
export default class App extends React.Component {
render() {
return (
<View style={styles.container}>
<AppNavigation/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
});

Try this code:
componentWillMount() {
this.observeLogin = firebase.auth().onAuthStateChanged(user => {
if (user) {
this.props.navigation.navigate('App');
} else {
this.props.navigation.navigate('Auth');
}
});
}
componentWillUnmount() {
// Don't forget to unsubscribe when the component unmounts
this.observeLogin ();
}

Need to specify screen react native tabnavigator

Problem
I made a very basic app using React Native, and now I want to have multiple tabs. When I tried to add a feed and comments tab, I get an error saying:
Uncaught Error: Route 'Feed' should declare a screen.
For example:
import MyScreen from './MyScreen'
...
Feed: {
Screen: MyScreen,
}
I don't know why I am getting this error, since the first class I call is the 'App' screen, which is what I named the screen. I would love some help getting this tab error fixed. Thank you!
Code
import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button, FlatList } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';
import { TabNavigator } from 'react-navigation';
const firebaseConfig = {
apiKey: "API-key",
authDomain: "candidtwo.firebaseapp.com",
databaseURL: "https://candidtwo.firebaseio.com",
storageBucket: "candidtwo.appspot.com",
};
const MyApp = TabNavigator({
Feed: {
screen: App,
},
CommentScreen: {
screen: Comments,
},
}, {
tabBarPosition: 'top',
animationEnabled: true,
tabBarOptions: {
activeTintColor: '#fe8200',
},
});
const firebaseApp = firebase.initializeApp(firebaseConfig);
var fontLoaded = false;
var ref = firebase.database().ref('posts');
var brightColor = ['#ffffff'];
var darkColor = ['#D3D3D3'];
var animalNames = ['WittyRhino','FriendlyRhino'];
var newPostRef = ref.push();
var postWidth = 360;
class App extends React.Component {
static navigationOptions = {
tabBarLabel: 'Home',
};
//App Code
}
class Comments extends React.Component {
static navigationOptions = {
tabBarLabel: 'Notifications',
};
render() {
return (
<Button
onPress={() => this.props.navigation.navigate('App')}
title="Go to notifications"
/>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 8,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
button: {
flex: 1,
backgroundColor: '#e8e8e8',
alignItems: 'center'
},
});

Define App and Comments components before
const MyApp = TabNavigator(...)
Hope this will help.

Data not inserting into Firebase Database

I am tring to insert a record from my react native app to Firebase.
And my code as follow:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import * as firebase from 'firebase';
var React = require('react-native');
var {
Component,
AppRegistry,
StyleSheet,
Text,
View,
TouchableHighlight,
TextInput,
ListView
} = React;
var Firebase = require('firebase');
export default class App extends React.Component {
constructor(props) {
super(props);
var myFirebaseRef = new Firebase('https://test.firebaseio.com/');
myFirebaseRef.set({
title: "Hello World!",
author: "Simon",
location: {
city: "Muenster",
state: "Germany",
zip: 48155
}
});
}
render() {
return (
<View style={styles.container}>
<Text>Open up App.js to start working on your app!</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
AppRegistry.registerComponent('devdacticFirebase', () => devdacticFirebase);
However, when I launch the app, the record is not inserting into my Firebase. It never throw me any error message also. Why is it so? Which part am I missing out?

You're mixing es5 & es6 code. Since you've already import firebase, you don't need to require it.
REFERENCE
In ES5, if you use CommonJS standard, the introduction of React package through basic require, the code is similar to this:
var ReactNative = require("react-native");
var {Image,Text} = ReactNative;
In ES6, the import wording is more standard similar to this:
import { Image, Text} from 'react-native'
Recently firebase has updated their web SDK, which changed some of its API. The syntax you're using looks like the 2.x API, while the latest version is pretty different
Please initialize the firebase once the app is loaded (recommend in componentWillMount method) so that you can use it everywhere in the code
componentWillMount() {
var config = {
"apiKey": "YOUR_API_KEY",
"authDomain": "YOUR_FB_DOMAIN",
"databaseURL": "YOUR_FIREBASE_URL",
"projectId": "YOUR_FB_PROJECT_ID"
}
firebase.initializeApp(config);
}
UPDATE
It is weird when you put firebase set in the constructor. I guess you want to add new record to the firebase, you can use set with push(), this will add new record. Let say you have user table in the database, so :
import {TouchableOpacity} from 'react-native';
export default class App extends React.Component {
componentWillMount() {
var config = {
apiKey: "...",
authDomain: "...",
databaseURL: "...",
projectId: "...",
storageBucket: "...",
messagingSenderId: "..."
};
firebase.initializeApp(config);
}
constructor(props) {
super(props);
}
insert = () => {
firebase.database().ref('user').push().set({
title: "Hello World!",
author: "Simon",
location: "Germany",
city: "Muenster",
state: "Germany",
zip: 48155
}, (error) => {
if (error) {
console.log(error.message);
} else {
// Success
}
});
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={()=> this.insert()}>
<Text>Hello World!</Text>
</TouchableOpacity>
</View>
);
}
}