Unable to get authentication working in react native and firebase

Simply trying to authenticate an email id and password for a login form.

When i enter an email and password and when i login i get an authentication failed message.

I am new to react native and firebase guys. I don't know why its not working and what to do. Any help is appreciated and thanks in advance.

Here is My login.js file

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  TextInput,
  View,
  StyleSheet, 
  Button,
} from 'react-native';
import Loader from './Loader';
import firebase from 'firebase';

export default class Login extends Component {

    state = {
        email: '',
        password: '',
        error: '',
        loading: false,
    };

    onButtonPress() {
        const { email, password } = this.state;
  this.setState({error: '', loading: true});


  firebase.auth().signInWithEmailAndPassword(email, password)
    .then(this.onAuthSuccess.bind(this))
    .catch(() => {
      firebase.auth().createUserWithEmailAndPassword(email, password)
        .then(this.onAuthSuccess.bind(this))
        .catch(this.onAuthFailed.bind(this));
    });
    }

onAuthSuccess() {
  this.setState({
  email: '',
  password: '',
  error: '',
  loading: false,
  })
}

onAuthFailed() {
  this.setState({
    error: 'Authentication Failed',
    loading: false,
  });
}

renderLoader() {
  if(this.state.loading) {
    return <Loader size="large" />;
  } else {
     return <Button onPress={this.onButtonPress.bind(this)} 
                title="Login">
              </Button>
  }
}

render() {
    return (
        <View style={styles.container}>
           <Text>Login</Text>

           <TextInput
              text={this.state.email}
              onTextChange={email => this.setState({ email })}
              textInputStyle={styles.fieldStyles}
              placeholder={'Email..'}
           />

            <TextInput
              text={this.state.password}
              onTextChange={password => this.setState({ password })}
              textInputStyle={styles.fieldStyles}
              placeholder={'Password..'}
              secureTextEntry
           />

           <Text style={styles.errorMessage}>
                {this.state.error}
           </Text>

          <View>
            {this.renderLoader()}
          </View>

        </View>
    );
}

and My app.js file

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import firebase from 'firebase';
import Login from './Login';

class App extends Component {
   componentWillMount() {
      firebase.initializeApp({
        apiKey: 'xxxxxxx',
        authDomain: 'xxxxx.firebaseapp.com',
        databaseURL: 'https://xxxx.firebaseio.com',
        projectId: 'xxxx',
        storageBucket: 'xxxxx.appspot.com',
        messagingSenderId: 'xxxxxx'
    });
}
render() {
    return (
       <View>
            <Login />
        </View>
      );
    }
  }

This is the first sample login page

When i enter the credentials and click login following message shows up.