Invariant Violation: Element type is invalid: expected a string or a class/function but got: undefined. - react-native

Question

Developers,
HELP. I'm getting this error with the below, I've been pouring over it trying to find the issue but just can't see it! What's wrong here? It seems to be stemming from the code from 146 to 236.
Invariant Violation: Element type is invalid: expected a string (for built-in >components) or a class/function (for composite components) but got: >undefined. You likely forgot to export your component from the file it's >defined in, or you might have mixed up default and named imports.
import React, { Component } from "react";
import PropTypes from "prop-types";
import {
View,
Text,
StyleSheet,
KeyboardAvoidingView,
LayoutAnimation,
UIManager,
Dimensions
} from "react-native";
import { Button, Input } from "react-native-elements";
import Icon from "react-native-vector-icons/FontAwesome";
import SimpleIcon from "react-native-vector-icons/SimpleLineIcons";
const SCREEN_WIDTH = Dimensions.get("window").width;
// Enable LayoutAnimation on Android
UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);
const TabSelector = ({ selected }) => {
return (
<View style={styles.selectorContainer}>
<View style={selected && styles.selected} />
</View>
);
};
TabSelector.propTypes = {
selected: PropTypes.bool.isRequired
};
export default class AuthScreen extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
selectedCategory: 0,
isLoading: false,
isPasswordValid: true,
isConfirmationValid: true
};
this.selectCategory = this.selectCategory.bind(this);
this.login = this.login.bind(this);
this.signUp = this.signUp.bind(this);
}
selectCategory(selectedCategory) {
LayoutAnimation.easeInEaseOut();
this.setState({
selectedCategory,
isLoading: false
});
}
login() {
const { password } = this.state;
this.setState({ isLoading: true });
// Simulate an API call
setTimeout(() => {
LayoutAnimation.easeInEaseOut();
this.setState({
isLoading: false,
isPasswordValid: password.length >= 8 || this.passwordInput.shake()
});
}, 1500);
}
signUp() {
const { password, passwordConfirmation } = this.state;
this.setState({ isLoading: true });
// Simulate an API call
setTimeout(() => {
LayoutAnimation.easeInEaseOut();
this.setState({
isLoading: false,
isPasswordValid: password.length >= 8 || this.passwordInput.shake(),
isConfirmationValid:
password == passwordConfirmation || this.confirmationInput.shake()
});
}, 1500);
}
render() {
const {
selectedCategory,
isLoading,
isPasswordValid,
isConfirmationValid,
email,
password,
passwordConfirmation
} = this.state;
const isLoginPage = selectedCategory === 0;
const isSignUpPage = selectedCategory === 1;
return (
<View style={styles.container}>
<KeyboardAvoidingView
contentContainerStyle={styles.loginContainer}
behavior="position"
>
<View style={styles.titleContainer}>
<View style={{ flexDirection: "row" }}>
<Text style={styles.titleText}>BEAUX</Text>
</View>
<View style={{ marginTop: -10, marginLeft: 10 }}>
<Text style={styles.titleText}>VOYAGES</Text>
</View>
</View>
<View style={{ flexDirection: "row" }}>
<Button
disabled={isLoading}
clear
activeOpacity={0.7}
onPress={() => this.selectCategory(0)}
containerStyle={{ flex: 1 }}
titleStyle={[
styles.categoryText,
isLoginPage && styles.selectedCategoryText
]}
title={"Login"}
/>
<Button
disabled={isLoading}
clear
activeOpacity={0.7}
onPress={() => this.selectCategory(1)}
containerStyle={{ flex: 1 }}
titleStyle={[
styles.categoryText,
isSignUpPage && styles.selectedCategoryText
]}
title={"Sign up"}
/>
</View>
<View style={styles.rowSelector}>
<TabSelector selected={isLoginPage} />
<TabSelector selected={isSignUpPage} />
</View>
{/* //!ISSUE LIES HERE */}
<View style={styles.formContainer}>
<Input
leftIcon={
<Icon
name="envelope-o"
color="rgba(0, 0, 0, 0.38)"
size={25}
style={{ backgroundColor: "transparent" }}
/>
}
value={email}
keyboardAppearance="light"
autoFocus={false}
autoCapitalize="none"
autoCorrect={false}
keyboardType="email-address"
returnKeyType="next"
inputStyle={{ marginLeft: 10 }}
placeholder={"Email"}
containerStyle={{
borderBottomColor: "rgba(0, 0, 0, 0.38)"
}}
ref={input => (this.emailInput = input)}
onSubmitEditing={() => this.passwordInput.focus()}
onChangeText={email => this.setState({ email })}
/>
<Input
leftIcon={
<SimpleIcon
name="lock"
color="rgba(0, 0, 0, 0.38)"
size={25}
style={{ backgroundColor: "transparent" }}
/>
}
value={password}
keyboardAppearance="light"
autoCapitalize="none"
autoCorrect={false}
secureTextEntry={true}
returnKeyType={isSignUpPage ? "next" : "done"}
blurOnSubmit={true}
containerStyle={{
marginTop: 16,
borderBottomColor: "rgba(0, 0, 0, 0.38)"
}}
inputStyle={{ marginLeft: 10 }}
placeholder={"Password"}
ref={input => (this.passwordInput = input)}
onSubmitEditing={() =>
isSignUpPage ? this.confirmationInput.focus() : this.login()
}
onChangeText={password => this.setState({ password })}
errorMessage={
isPasswordValid ? null : "Please enter at least 8 characters"
}
/>
{isSignUpPage && (
<Input
icon={
<SimpleIcon
name="lock"
color="rgba(0, 0, 0, 0.38)"
size={25}
style={{ backgroundColor: "transparent" }}
/>
}
value={passwordConfirmation}
secureTextEntry={true}
keyboardAppearance="light"
autoCapitalize="none"
autoCorrect={false}
keyboardType="default"
returnKeyType={"done"}
blurOnSubmit={true}
containerStyle={{
marginTop: 16,
borderBottomColor: "rgba(0, 0, 0, 0.38)"
}}
inputStyle={{ marginLeft: 10 }}
placeholder={"Confirm password"}
ref={input => (this.confirmationInput = input)}
onSubmitEditing={this.signUp}
onChangeText={passwordConfirmation =>
this.setState({ passwordConfirmation })
}
errorMessage={
isConfirmationValid ? null : "Please enter the same password"
}
/>
)}
{/* //!ISSUE ENDS HERE */}
<Button
buttonStyle={styles.loginButton}
containerStyle={{ marginTop: 32, flex: 0 }}
activeOpacity={0.8}
title={isLoginPage ? "LOGIN" : "SIGN UP"}
onPress={isLoginPage ? this.login : this.signUp}
titleStyle={styles.loginTextButton}
loading={isLoading}
disabled={isLoading}
/>
</View>
</KeyboardAvoidingView>
<View style={styles.helpContainer}>
<Button
title={"Need help ?"}
titleStyle={{ color: "red" }}
buttonStyle={{ backgroundColor: "transparent" }}
underlayColor="transparent"
onPress={() => console.log("Account created")}
/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
backgroundColor: "#034d84",
flex: 1
},
rowSelector: {
height: 20,
flexDirection: "row",
alignItems: "center"
},
selectorContainer: {
flex: 1,
alignItems: "center"
},
selected: {
position: "absolute",
borderRadius: 50,
height: 0,
width: 0,
top: -5,
borderRightWidth: 70,
borderBottomWidth: 70,
borderColor: "white",
backgroundColor: "white"
},
loginContainer: {
alignItems: "center",
justifyContent: "center"
},
loginTextButton: {
fontSize: 16,
color: "white",
fontWeight: "bold"
},
loginButton: {
backgroundColor: "rgba(232, 147, 142, 1)",
borderRadius: 10,
height: 50,
width: 200
},
titleContainer: {
height: 150,
backgroundColor: "transparent",
justifyContent: "center"
},
formContainer: {
backgroundColor: "white",
width: SCREEN_WIDTH - 30,
borderRadius: 10,
paddingTop: 32,
paddingBottom: 32,
alignItems: "center"
},
loginText: {
fontSize: 16,
fontWeight: "bold",
color: "white"
},
categoryText: {
textAlign: "center",
color: "white",
fontSize: 24,
fontFamily: "light",
backgroundColor: "transparent",
opacity: 0.54
},
selectedCategoryText: {
opacity: 1
},
titleText: {
color: "white",
fontSize: 30,
fontFamily: "regular"
},
helpContainer: {
height: 64,
alignItems: "center",
justifyContent: "center"
}
});

Answer 1

Based on your input that you are on react-native-elements version 0.19.1, it seems the Input component isn't available (see docs). Only the v1.0.0 beta versions support Input as component.