React Native/Firebase Error app hasn't been created

Question

Problem

I am creating a simple app where people can create posts using react native and firebase, and when I added all of the code to upload a variable "postInput" to a server, I got an error (picture included) saying that the app hasn't been created, and it tells me to call App.initializeApp() but I do have that code in my app. I would love some help solving this problem.

Code

import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TextInput, ScrollView, TouchableHighlight, Button } from 'react-native';
import { Font } from 'expo';
import * as firebase from 'firebase';

var fontLoaded = false;

var ref = firebase.database().ref('posts');

var newPostRef = ref.child("posts");

var newPostRef = postsRef.push();

const firebaseConfig = {
  apiKey: "AIzaSyD025SWUH7zLELn4vWtf9nGq1-0h33Y958",
  authDomain: "candidtwo.firebaseapp.com",
  databaseURL: "https://candidtwo.firebaseio.com",
  storageBucket: "candidtwo.appspot.com",
};
const firebaseApp = App.initializeApp(firebaseConfig); //tells me to call this, I do and still get error

export default class App extends React.Component {

  state = {
    fontLoaded: false,
  };



  componentDidMount() {
      Expo.Font.loadAsync({
        'JosefinSans-Regular.ttf': require('./JosefinSans-Regular.ttf'),
      });
 }
  constructor(props) {
    super(props);
    this.state = { postInput: ""}
  }

 render() {
    return (
      <View style={styles.container}>
        <View style={styles.button}>
          <View style={{width: 1, height: 30, backgroundColor: '#e8e8e8'}} />
          <Button
            onPress={() => this.setState({ fontLoaded: true })}
            title="Press Me To Load the App After 15 Seconds!"
            color="#fe8200"
            accessibilityLabel="Wait 15 seconds and then press me to load the font!"
          />
        </View>


        {this.state.fontLoaded ? (
          <View style={styles.container}>
            <Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 16 }}>
                Whats on your mind? Create a post!
            </Text>  

            <TextInput
                 style={{height:40, width: 320, borderColor: '#303030', borderWidth: 1}}
                 onChangeText={(postInput)=>this.setState({postInput})}
                 value={this.state.postInput}    
             />


    <Button
      onPress={() => {
        newPostRef.set({ content:this.state.postInput });
        this.setState({ postInput: "Your post was succsesfully uploaded! :)" })    
      }}               
      title="                              +                              "
      color="#fe8200"
    />

var path = newPostRef.toString();

            <ScrollView>
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
               <View style={{width: 350, height: 250, backgroundColor: '#1daff1',  alignItems: 'center', justifyContent: 'center',    borderRadius: 10, paddingLeft: 10, paddingRight:10}} >
         <Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 18, color: '#ffffff', textAlign: 'center'}}>
                    Why do android phones have higher inital quality than apple phones, but apple phones have a more consistent amount of quality throughout their years?
                </Text>
            </View>
               <View style={{width: 350, height: 40, borderRadius: 10, backgroundColor: '#147aa8', flexDirection: 'row',paddingLeft:5}} >
            <Image source={require('./CandidtwoImages/unlove.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 18, color: '#ffffff'}}>
                    3
                    </Text>
            <Image source={require('./CandidtwoImages/undislike.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 18, color: '#ffffff'}}>
                    1
                    </Text>
            <Image source={require('./CandidtwoImages/comments.png')} />
            <Text style={{ fontFamily: 'JosefinSans-Regular', fontSize: 18, color: '#ffffff'}}>
                    8
                    </Text>
        </View>
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
               <View style={{width: 35, height: 25, backgroundColor: '#147c41', borderRadius: 10}} />
               <View style={{width: 35, height: 4, backgroundColor: '#0f582d', borderRadius: 10}} />
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
           <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
               <View style={{width: 35, height: 25, backgroundColor: '#9dcd46', borderRadius: 10}} />
               <View style={{width: 35, height: 4, backgroundColor: '#6c8f31', borderRadius: 10}} />
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
           <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />
               <View style={{width: 35, height: 25, backgroundColor: '#d3832e', borderRadius: 10}} />
               <View style={{width: 35, height: 4, backgroundColor: '#935b1e', borderRadius: 10}} />
               <View style={{width: 1, height: 6, backgroundColor: '#e8e8e8'}} />

             </ScrollView>
          </View>) : (null) }
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 8,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
  button: {
    flex: 1,
    backgroundColor: '#e8e8e8',
    alignItems: 'center'
  },
});

Error Message

Answer 1

You should be calling this to initialize your app.

const firebaseApp = firebase.initializeApp(firebaseConfig);

Answer 2

So, in this line here:

var ref = firebase.database().ref('posts');

You are trying to assign a reference to your firebase database when your firebase App is not initialized yet.

Here:

const firebaseApp = App.initializeApp(firebaseConfig);

You are trying to initialize the firebase App calling the initializeApp() method from your App class, and this method belongs to the firebase import that you've made above, and you don't need to initialize your firebase App assigning it to a variable.

What you can do is something like this:

Delete the line where you are creating your variable ref;

Initialize your firebase App like this:

firebase.initializeApp(config);

And then you can create your variable ref;

var ref = firebase.database().ref('posts');