Invariant Violation: Element type is invalid - reactjs

Question

I am trying to clean up my styles by using a StyleSheet, but I can't seem to get it to work. I believe the error (seen below) is caused when I attempt to create a StyleSheet (const styles = EStyleSheet.create.
Note I am using react-native-extended-stylesheet However this is not the problem. This also happens with react-native's stylesheet.
This a picture of the error:
This this my code:
import React, { Component } from "react";
import {
View,
Text,
Button,
Image,
StyleSheet,
TextInput,
KeyboardAvoidingView,
TouchableOpacity
} from "react-native";
export default class Login extends Component {
render() {
return (
<View style={styles.wrapper}>
<Text>Login screen </Text>
<KeyboardAvoidingView behavior="padding" style={styles.loginContainer}>
<TextInput
placeholder="username or email"
placeholderTextColor='whitesmoke'
style={styles.input}
/>
<TextInput
placeholder="password"
secureTextEntry
placeholderTextColor='whitesmoke'
style={styles.input}
/>
<TouchableOpacity style={styles.loginbutton} onPress={() => this.props.navigation.navigate("Grades")}>
<Text style={{
textAlign: 'center',
color: "whitesmoke",
fontWeight: '700',
}}>
Login
</Text>
</TouchableOpacity>
</KeyboardAvoidingView>
</View>
);
}
}
const styles = StyleSheet.create({
loginContainer: {
paddingHorizontal: 9,
backgroundColor: "red"
},
input: {
paddingHorizontal: 10,
marginBottom: 10,
color: '#f1c40f', //sunflower color
backgroundColor: '#3498db',
},
logo: {
width: 231,
height: 231
},
wrapper: {
flex: 1,
alignItems: "center",
justifyContent: "center"
}
});
Here is my app.js.
import React from "react";
import { Font } from "expo";
import { Root } from "./app/router";
import { FontError } from "./app/components/fontError";
export default class App extends React.Component {
state = {
fontLoaded: false
};
async componentDidMount() {
await Font.loadAsync({
Arial: require("./app/resources/Arial.ttf")
});
this.setState({ fontLoaded: true });
}
render() {
if (!this.state.fontLoaded) return <FontError/>;
return <Root />;
}
// ...
}
My root component is router.js, I am using react-navigation.
import React, { Component } from "react";
import { createStackNavigator } from "react-navigation";
import {
Login,
Grades,
} from "./screens";
export const Root = createStackNavigator({
Login: {screen: Login},
Grades: {screen: Grades},
});
Feel free to ask me to append any additional information.
Thanks for your help in advance.

Answer 1

To fix my error I just re-cloned the repo and added back in all the code I wrote.
Thankfully I didn't push this error to the master branch.
This fixed the error.
*note in the process I got rid off react-native-extended-stylesheet, so it might have been cause of error.