Ошибка «undefined не является объектом» (оценивается как «this.database.push»)

Question

В настоящее время в процессе создания приложения-календаря, обучения Firebase и native-реагировать. Я использую EXPO для тестирования приложения на ходу, но когда я нажимаю «зарегистрироваться», чтобы зарегистрировать пользователя, он выдает ошибку в названии. Это может быть опечатка, но я искал ее часами и не могу найти причину ошибки. Если кто-то может просто указать причину ошибки, я могу попытаться исправить ее самостоятельно, но мне нужен новый набор глаз, чтобы выручить.

import React, { Component } from "react";
import Expo from "expo";
import firebase from "firebase/app";
import "firebase/database";
import { Alert, View } from "react-native";
import {
  Button,
  Container,
  Content,
  Form,
  Header,
  Input,
  Item,
  Label,
  Text
} from "native-base";

const firebaseConfig = {
  apiKey: , //Edited out this info to post this
  authDomain: ,
  databaseURL: ,
  projectId: ,
  storageBucket: ,
  messagingSenderId: 
};

export default class RegistrationScreen extends Component {
  constructor(props) {
    super(props);
    this.state = {
      firstName: "",
      lastName: "",
      email: "",
      password: "",
      confirmPassword: "",
      isReady: false,
      users: []
    };
    this.verifyNewUserCredentials = this.verifyNewUserCredentials.bind(this);
    this.onRegistrationTap = this.onRegistrationTap.bind(this);

    this.app = firebase.initializeApp(firebaseConfig);
    this.db = this.app
      .database()
      .ref()
      .child("users");
  }

  /**
   * Load fonts before doing anything
   */
  async componentWillMount() {
    await Expo.Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });
    this.setState({ isReady: true });
    const previousUsers = this.state.users;
    this.database.on("child_added", snap => {
      previousUsers.push({
        id: snap.apiKey,
        usersData: snap.val().usersData
      });
    });
  }

  /**
   * Check if a user is trying to register with valid credentials
   */
  verifyNewUserCredentials(
    anEmail,
    aFirstName,
    aLastName,
    aPassword,
    aConfirmPassword
  ) {
    if (
      !(anEmail.length < 0) &&
      !(aFirstName.length < 0) &&
      !(aLastName.length < 0) &&
      aPassword === aConfirmPassword &&
      aPassword.length >= 8
    ) {
      return true;
    } else if (anEmail.length === 0) {
      Alert.alert("Please enter a valid email.");
    } else if (aFirstName.length === 0 || aLastName.length === 0) {
      Alert.alert("Please enter a first and last name.");
    } else if (aPassword.length < 6) {
      Alert.alert("The password must be at least 6 characters long.");
    } else {
      Alert.alert("Password and Confirm password do not match");
    }
    return false;
  }

  onRegistrationTap(even) {
    const theEmail = this.state.email;
    const theFirstName = this.state.firstName;
    const theLastName = this.state.lastName;
    const thePassword = this.state.password;
    const theConfirmPassword = this.state.confirmPassword;

    var validUser = this.verifyNewUserCredentials(
      theEmail,
      theFirstName,
      theLastName,
      thePassword,
      theConfirmPassword
    );
    if (validUser) {
      this.database.push().set({ usersData: validUser });
    }
  }

  render() {
    /* if (!this.state.isReady) {
      return <Expo.AppLoading />;
    } */
    return (
      <Container>
        <Header
          leftComponent={{ color: "#fff" }}
          centerComponent={{ text: "Registration", style: { color: "#fff" } }}
          rightComponent={{ color: "#fff" }}
        />
        <Content>
          <Form>
            <Item floatingLabel>
              <Label>Email</Label>
              <Input
                onChangeText={email => this.setState({ email })}
                value={this.state.email}
              />
            </Item>
            <Item floatingLabel>
              <Label>First Name</Label>
              <Input
                onChangeText={firstName => this.setState({ firstName })}
                value={this.state.firstName}
              />
            </Item>
            <Item floatingLabel>
              <Label>Last Name</Label>
              <Input
                onChangeText={lastName => this.setState({ lastName })}
                value={this.state.lastName}
              />
            </Item>
            <Item floatingLabel>
              <Label>Password</Label>
              <Input
                secureTextEntry
                onChangeText={password => this.setState({ password })}
                value={this.state.password}
              />
            </Item>
            <Item floatingLabel last>
              <Label>Confirm Password</Label>
              <Input
                secureTextEntry
                onChangeText={confirmPassword =>
                  this.setState({ confirmPassword })
                }
                value={this.state.confirmPassword}
              />
            </Item>
          </Form>
          <Button block warning onPress={this.onRegistrationTap}>
            <Text>Register</Text>
          </Button>
        </Content>
      </Container>
    );
  }
}

Спасибо за любую помощь. Надеюсь, это просто простая ошибка, но я все еще плохо знаком с реакцией и огненной базой, поэтому я все еще не уверен на 100%, что искать.