Data not inserting into Firebase Database

Question

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?

Answer 1

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>
    );
  }
}