this.setState is not a function. React Native noobie - react-native

Question

I keep getting the following error: this.setState is undefined with my React Native project. I have never seen this error before in React, but React Native is new to me. I have done some research and there are many people suggesting to either use a constructor and bind(this) or use an arrow function in the onPress property. I have tried both, but neither seem to work. Please also note that my first 2 functions work fine it is the createUser function that is throwing the error. I would appreicate any help, thanks in advance. Here is my original code:
import React, {Component} from 'react';
import {ScrollView, StyleSheet, TextInput, Text, View, Image, Button } from 'react-native';
import firebase from '../firebase.js';
class Auth extends Component {
state = {
username: "",
password: "",
error: ""}
onChangeUsername= (event) => {
this.setState({ username: event.nativeEvent.text})
}
onChangePassword= (event) => {
this.setState({ password: event.nativeEvent.text})
}
createUser = (event) =>{
firebase.auth().createUserWithEmailAndPassword(this.state.username, this.state.password).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
if(errorCode === "auth/invalid-email")
{this.setState({error: 2})}
console.log(error.code);
console.log(error.message);
});
}
render(){
return(
<View style={{width: "100%", height: "100%", backgroundColor: "#eeeeee",flexDirection:"column", alignItems:"center", justifyContent:"center"}}>
<Text>Email</Text>
<TextInput
value={this.state.username}
autoCorrect={false}
onChange={this.onChangeUsername}
style={{width: "80%", height: "10%", backgroundColor: "white", padding: "2%", margin:"2%"}}
placeholder={"Enter Email"}
autoComplete={"off"}
/>
<Text>Password</Text>
<TextInput
value= {this.state.password}
autoCorrect={false}
onChange={this.onChangePassword}
style={{width: "80%", height: "10%", backgroundColor: "white", padding: "2%", margin:"2%"}}
placeholder={"Enter Password"}
secureTextEntry={true}
/>
<Button title="Sign Up" style={{backgroundColor: "blue", padding: "2%", margin:"2%"}} onPress={(e)=>{this.createUser(e)}}></Button>
<Text>{this.state.error}</Text>
<View style={{width: "100%", height:"20%"}}></View>
</View>
);
}
}
export default Auth;
I have tried replacing
state = {
username: "",
password: "",
error: ""}
with
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
error: ""};
this.createUser = this.createUser.bind(this);
}
I have also tried replacing:
<Button title="Sign Up" style={{backgroundColor: "blue", padding: "2%", margin:"2%"}} onPress={this.createUser}></Button>
and
createUser = () =>{
with
<Button title="Sign Up" style={{backgroundColor: "blue", padding: "2%", margin:"2%"}} onPress={(e)=>{this.createUser(e)}}></Button>
and
createUser = (event) =>{
But neither of these have worked.

Answer 1

I think the problem is following setState:
{this.setState({error: 2})}
This is because the line
firebase.auth().createUserWithEmailAndPassword(this.state.username, this.state.password).catch(function(error) {
will change the this context due the use of function()
Change it to an arrow function to keep the this context.
-->
firebase.auth().createUserWithEmailAndPassword(this.state.username, this.state.password).catch((error) => {