React-Native, Redux, invariant violation - reactjs

Question

import React, { Component } from "react";
import { connect } from "react-redux";
import { Text, View, TouchableOpacity, StyleSheet,Image ,TextInput,Button} from "react-native";
import Icon from 'react-native-vector-icons';
import { login } from "../Actions/actionCreator";
class LoginScreen extends Component {
static navigationOptions = {
title: "Login"
};
constructor(props){
super(props);
this.state = {
username:'',
password:''
}
}
doLogin(username,password)
{
}
render() {
return (
<View style={styles.rootContainer}>
<Image
style={styles.logo}
source={require('/Users/apple/Desktop/redux-react-navigation-demos-authFlow/src/images/logo.png')}
/>
<Icon
name='user'
color='#000'
size={14}
/>
<TextInput
onChangeText={username => this.setState({ username })}
value={this.state.username}
style={styles.textInput}
placeHolder="Username"
/>
<TextInput
onChangeText={password => this.setState({ password })}
value={this.state.password}
style={styles.textInput}
placeHolder="Password"
/>
<Text style={styles.textGreen}>Forget Your Password</Text>
<Button
onPress={() => {
this.doLogin(this.state.username, this.state.password)
}}
color="#ffffff"
title="Sign In"
>
Sign In
</Button>
</View>
);
}
}
const styles = StyleSheet.create({
rootContainer: {
flex: 1,
backgroundColor: "cyan",
justifyContent: "center",
alignItems: "center"
},
textStyles: {
textAlign: "center",
color: "rgba(0,0,0,0.8)",
fontSize: 16
},
touchableStyles: {
marginTop: 15,
backgroundColor: "black",
paddingHorizontal: 50,
paddingVertical: 10,
borderRadius: 5
},
textGreen: {
textAlign:"center",
fontSize:16,
color:'#7dc4a6'
},
logo: {
width: 587,
height: 112
},
textInput: {
borderColor:'black',
backgroundColor:'#D3D3D3',
width:300,
borderWidth: 1,
borderStyle: 'solid',
fontSize:15,
borderRadius: 25,
}
});
const mapDispatchToProps = {
login
};
const Login = connect(null, mapDispatchToProps)(LoginScreen);
export default Login;
The above code is my LoginScreen Component I have exported my login screen please check. My simulator throws an error saying invariant violation saying that I have not exported my component. I have a loginScreen Component which is what I want to export. I am importing this
component in my navigationStack for routing and navigation purposes.
Screenshot of the error:

Answer 1

Do not export your component with default. Just use export Login or export const Login = connect(null, mapDispatchToProps)(LoginScreen);.
Then, in your StackNavigator, import it: import { Login } from 'src/components/Login.
This should solve your problem of your imported comp's instance being undefined.

Answer 2

If you use "default" with export i.e.
export default Login;
Then you should import it like:
import Login from 'src/components/Login'
and if you didn't use "default", try to import like:
import {Login} from 'src/components/Login'

Answer 3

Most probably the Icon import is wrong so that ends up being undefined, triggering the error.
Assuming you're using this package: https://github.com/oblador/react-native-vector-icons , the correct import would be:
import Icon from 'react-native-vector-icons/FontAwesome';
(notice the /FontAwesome addition at the end)
As a general debugging method, whenever you get this error, then inside render() (or even outside the class) do a console.log of all the variables you're using as tags. Usually one of them is undefined, and you've found the culprit. Make sure the import works and yields a Component or a non-empty string and you're good to go :)