title: Invariant Violation: Element type is invalid - React Native
body: <p>Git hub repo is here : <a href="https://github.com/AliYar-Khan/react-navigation.git" rel="nofollow noreferrer">https://github.com/AliYar-Khan/react-navigation.git</a></p>
  
  <p>When I going to run my react native app on my Genny motion emulator this error displayed in red background area.</p>
  
  <blockquote>
    <p>Invariant Violation: Element type is invalid: expected a string (for
    built-in components) or a class/function (for composite components)
    but got: object. You likely forgot to export your component from the
    file it's defined in.</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/lU93I.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lU93I.png" alt="enter image description here"></a></p>
  
  <p>this is the Login.js inside the 'src/pages/' folder</p>
  
  <pre><code>import * as React from 'react';
  import {
    TouchableOpacity ,
    View , 
    StyleSheet , 
    ScrollView , 
    Text , 
    TextInput , 
    Dimensions , 
    Alert 
  } from 'react-native';
  
  import { connect } from 'react-redux';
  import Logo from '../components/Logo';
  import clickLogin from '../redux/actions/loginActions';
  import { Icon } from 'react-native-elements';
  
  const { height } = Dimensions.get('window');
  
  class Login extends React.Component {
    constructor(props){
      super(props);
      this.state = {
        username : '' ,
        password : '' ,
        screenHeight: height ,
        pendingLoginReqest : false 
      } 
    }
  
    onContentSizeChange = (contentWidth, contentHeight) =&gt; {
      this.setState({ screenHeight: contentHeight });
    };
  
    Login = () =&gt; {
        // firebase.auth().signInWithEmailAndPassword(this.state.username , this.state.password)
        //   .then(()=&gt;{
  
        //   }, (error) =&gt; {
        //     Alert.alert(error.message);
        //   })
      this.props.clickLogin(this.state);
    };
  
    render() {
      const scrollEnabled = this.state.screenHeight &gt; height;
      const {navigate} = this.props.navigation;
      return (
        &lt;ScrollView style={{ flex: 1 }}
            scrollEnabled={scrollEnabled}
            onContentSizeChange={this.onContentSizeChange}
        &gt;
        &lt;View style={styles.container}&gt; 
            &lt;Logo /&gt;
            &lt;TextInput style={styles.textinput}
              returnKeyType='next'
              underlineColorAndroid='rgba(0,0,0,0)'
              placeholder='Email or Username'
              keyboardType='email-address'
              autoCapitalize='none'
              autoCorrect = {false}
              onChangeText={data =&gt; this.setState({ username : data })}
              onSubmitEditing={() =&gt; this.passwordInput.focus()}
              placeholderTextColor = '#ffffff'
            /&gt;
  
            &lt;TextInput style={styles.textinput}
              underlineColorAndroid='rgba(0,0,0,0)'
              placeholder='Password'
              secureTextEntry
              returnKeyType='go'
              onChangeText={data =&gt; this.setState({ password : data})}
              ref= {(input) =&gt; this.passwordInput = input}
              placeholderTextColor = '#ffffff'
            /&gt;
  
            &lt;TouchableOpacity style={styles.buttonLogin}
              onPress={this.Login}&gt;
              &lt;Text style={styles.loginButtonText}&gt;Login&lt;/Text&gt;  
            &lt;/TouchableOpacity&gt; 
  
            &lt;View style={styles.socialLoginButtons}&gt;
              &lt;Icon.Button name='facebook' size={15} backgroundColor='#1c313a'&gt; 
                &lt;Text style={{fontFamily:'Arial', fontSize:15, fontSize: 16,
                  fontWeight: '500', color: '#ffffff', 
                  textAlign: 'center'}}
                &gt;
                Login with Facebook
                &lt;/Text&gt;
              &lt;/Icon.Button&gt;      
            &lt;/View&gt;
  
            &lt;View style={styles.socialLoginButtons}&gt;
              &lt;Icon.Button name='twitter' size={20} backgroundColor='#1c313a'&gt; 
                &lt;Text style={{fontFamily:'Arial', fontSize:15,fontSize: 16,
                  fontWeight: '500',color: '#ffffff',textAlign: 'center'}}&gt;
                  Login with Twitter
                &lt;/Text&gt;
              &lt;/Icon.Button&gt;      
            &lt;/View&gt;
  
            &lt;View style={styles.signuptextcont}&gt;
              &lt;Text style={styles.signuptext}&gt;Don't have an Account?&lt;/Text&gt;
              &lt;TouchableOpacity style={styles.signupbtn} onPress= {()=&gt;navigate('Signup')}&gt;
                &lt;Text style={styles.signuptext}&gt;Signup&lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
            &lt;/View&gt;
          &lt;/View&gt;
        &lt;/ScrollView&gt;
      );
    }
  }
  
  // const mapStateToProps = state =&gt; {
  //   return {
  
  //   }
  // }
  
  const mapDispatchToProps = (dispatch) =&gt; {
      return {
        clickLogin : (user) =&gt; dispatch(clickLogin(user)) 
      }
  }
  
  export default connect(null,mapDispatchToProps)(Login);
  
  const styles = StyleSheet.create({
    container:{
        flex: 1,
        alignItems: 'center',
        justifyContent:'flex-start'
    },
    text:{
      marginVertical:15,
      color: 'rgba(255,255,255,0.7)',
      fontSize: 20
    },
    textinput:{
      width: 300,
      backgroundColor : 'rgba(255,255,255,0.3)',
      borderRadius: 25,
      paddingHorizontal: 16,
      color: '#ffffff',
      marginVertical: 10
    },
    signuptext:{
      color: 'rgba(255,255,255,0.6)',
      fontSize: 16
    },
    socialLoginButtons:{
      paddingVertical: 5,
      marginVertical: 10,
      width: 300,
      backgroundColor: '#1c313a'
    },
    signuptextcont:{
      flexGrow: 1,
      alignItems: 'flex-end',
      flexDirection: 'row',
      justifyContent:'center',
      paddingVertical: 16    
    },
    buttonLogin:{
      width: 300,
      backgroundColor: '#1c313a',
      borderRadius: 25,
      paddingVertical: 12,
      marginVertical: 5
    },
    signupbtn:{
      color : '#ffffff',
      fontSize: 16,
      fontWeight: '500',
      paddingHorizontal:10
    }
  });
  </code></pre>
  
  <p>and Logo.js is as follows : </p>
  
  <pre><code>import * as React from 'react';
  import { Image, View, StyleSheet, Text } from 'react-native';
  import { TextInput } from 'react-native-gesture-handler';
  
  
  export default class Logo extends React.Component {
      render() {
        return (
          &lt;View style={styles.LogoContainer}&gt; 
              &lt;Image style={{width: 50, height: 50}}
                source={require('../img/favicon.png')}/&gt;
              &lt;Text style={styles.LogoText}&gt;Welcome to the App.&lt;/Text&gt;
          &lt;/View&gt;
        );
      }
  }
  
  const styles = StyleSheet.create({
  
     LogoContainer:{
        alignItems: 'center',
        justifyContent:'center',
        marginTop:50,
        marginVertical:5,
        marginBottom:5
      },
      LogoText:{
        marginVertical:20,
        color: 'rgba(255,255,255,0.7)',
        fontSize: 20
      }
  
  });
  </code></pre>