login.js

import React from 'react';
import {
  TextInput,
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  Image,
  ImageBackground,
  View,
  Button,
  TouchableOpacity

}
  from 'react-native';
import {StackNavigator} from 'react-navigation'
import * as firebase from 'firebase';

//import {Container , Content, Header, Form, Input, Item, Button, Label } from 'native-base';

export default class App extends React.Component {

constructor(props){
  super(props)
  this.state =({
    email:'',
    password:''
  })
}



signUpUser = (email,password) => {
  try {
    if (this.state.password.length < 6){
      alert("Minimal 6 karakter")
      return;
    }

    firebase.auth().createUserWithEmailAndPassword(email, password)
  }
  catch (error) {
    console.log(error.toString())
  }
}

loginUser = (email,password) => {

  try {

      firebase.auth().signInWithEmailAndPassword(email,password).then(function(user){
        console.log(user)
        this.props.navigation.navigate("Menu");
      })
    }

  catch (error) {
    console.log(error.toString())
  }
}


  render() {
    return (
      <ImageBackground
      style={styles.stretch}
      source={require('../images/bg.jpg')}>
      <View style={styles.top}>
        <Image source={require('../images/icon.png')}/>

        <TextInput style = {styles.searchInput}
        underlineColorAndroid = "transparent"
        placeholder ='Username'
        onChangeText={(email) => this.setState({email})}
        />

        <TextInput style = {styles.searchInput}
        underlineColorAndroid = "transparent"
        placeholder ='Password'
        onChangeText={(password) => this.setState({password})}
        />

        <TouchableOpacity
              onPress={() => this.loginUser(this.state.email,this.state.password)}
              style = {styles.searchInput}>
               <Text style = {styles.submitButtonText}> Login </Text>
        </TouchableOpacity>

        <TouchableOpacity
              onPress={() => this.signUpUser(this.state.email,this.state.password)}
              style = {styles.searchInput}>
               <Text style = {styles.submitButtonText}> SignUp </Text>
        </TouchableOpacity>

      </View>

      </ImageBackground>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  stretch: {
  flex: 1,
  width: '100%',
  height: '100%',
  },
  top: {
    marginTop: 80,
    height: '60%',
    paddingTop: 10,
    alignItems: 'center',
    justifyContent: 'center',
  },
    topdua: {
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  searchInput:{
    marginTop: 15,
    height:40,
    width:'70%',
    borderWidth:2,
    //color:'#fff',
    borderColor:'#fff',
    borderRadius:5,
  },
  submitButtonText:{
    height: 40,
    width: '70%',
    color: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
   }
});





app.js

import React from 'react';
import {
  TextInput,
  AppRegistry,
  Platform,
  StyleSheet,
  Text,
  Image,
  ImageBackground,
  View,
  Button,
  TouchableOpacity

}
from 'react-native';
import * as firebase from 'firebase';
import {StackNavigator} from 'react-navigation';
import Login from './app/pages/login.js';
import Menu from './app/pages/menu.js';

const RootRouter = StackNavigator({
  Login: {
    screen: Login, navigationOptions: {title: 'Login'}
  },
    Menu: {
    screen: Menu, navigationOptions: {title: 'Menu'}
  }

})



export default class App extends React.Component {
componentWillMount() {
firebase.initializeApp({
    apiKey: "AIzaSyAsUKhwvoN7pfVz0cqWyIdZqmCqPFyjsO0",
    authDomain: "sunprojectprototype.firebaseapp.com",
    databaseURL: "https://sunprojectprototype.firebaseio.com",
    projectId: "sunprojectprototype",
    storageBucket: "sunprojectprototype.appspot.com",
    messagingSenderId: "1084510740952",
});

}

  render() {
    return ( <RootRouter /> );
  }
}