React Native: Object is not a function - firebase

Question

I am working with Firebase authentification in my React Native android app, however every time I try to login and press the button, it gives me this error:
Object is not a function(evaluating 'this2.state'({
error: 'Authentification failed', loading: false
}))
I have looked up similar answers as well, but it doesn't seem to match my problem. Any help would be appreciated.
Here is my code:
import React from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
PixelRatio,
TouchableOpacity,
Image,
Button,
} from 'react-native';
import * as firebase from 'firebase';
import { FormLabel, FormInput } from 'react-native-elements';
import Help from './app/components/Help';
import { Input } from './app/components/Input';
const util = require('util');
firebase.initializeApp({
apiKey: 'AIzaSyCmjeFuDoMeOkeG5J-TCXzDJ1vtaDqUXjE',
authDomain: 'dev-pre-do.firebaseapp.com',
databaseURL: 'https://dev-pre-do.firebaseio.com',
projectId: 'dev-pre-do',
storageBucket: 'dev-pre-do.appspot.com',
messagingSenderId: '943752089124'
}
);
class LoginScreen extends React.Component {
static navigationOptions ={
header: null,
};
constructor(props) {
super(props);
this.state = {email:'', password:'', error: '', loading:false};
}
onLoginPress(){
this.setState({error:'', loading:true});
const{email, password} = this.state;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => {
this.state({error: '', loading: false});
this.props.navigation.navigate('CreateIdeaMenu');
})
.catch(() => {
this.state({error: 'Authentification failed', loading: false});
})
}
renderButtonOrLoading(){
if(this.state.loading) {
return (
<Text style={styles.loading}> Loading </Text>
)}
return (
<View>
<Button style={styles.Button} title='Login'
onPress={this.onLoginPress.bind(this)}></Button>
</View>
)
}
render() {
return (
<View style={styles.container}>
<Help onPress = {()=> navigate("HelpFirst")}/>
<Image style={styles.logo}
source={require('./app/images/PREDO_logo_white.png')}
/>
<FormLabel> Email</FormLabel>
<FormInput onChangeText={email => this.setState({ email })}/>
<FormLabel> Password</FormLabel>
<FormInput onChangeText={password => this.setState({ password })}/>
<Text>{this.state.error}</Text>
{/* <Input
placeholder='Email'
label='Email'
onChangeText={email => this.setState({ email })}
value={this.state.email}
/>
<Input
placeholder='Password'
label='Password'
secureTextEntry
onChangeText={password => this.setState({ password })}
value={this.state.password} */}
{this.renderButtonOrLoading()}
{/* <Button onPress={() => console.log('pressed')}>Log in</Button>*/}
{/* <RegForm onPress = {()=> navigate("CreateIdeaMenu")} /> */}
</View>
);
}
};
const styles = StyleSheet.create({
container: {
flex:1,
justifyContent: 'flex-start',
alignItems: 'center',
backgroundColor: '#1e1f20',
paddingLeft: 60,
paddingRight: 60,
paddingTop: 10,
},
Button: {
width: 200,
height:100,
marginBottom: 10,
backgroundColor: 'purple',
alignItems: 'center',
justifyContent: 'center',
},
logo: {
width: 360,
height:94,
marginBottom: 80,
marginTop: 20,
},
loading: {
color: 'white',
fontSize: 50,
}
});
export default LoginScreen;

Answer 1

Update your code as below:
onLoginPress(){
this.setState({error:'', loading:true});
const{email, password} = this.state;
firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => {
this.setState({error: '', loading: false});
this.props.navigation.navigate('CreateIdeaMenu');
})
.catch(() => {
this.setState({error: 'Authentification failed', loading: false});
})
}