Invariant Violation: Element type is invalid: expected a string : React-Native

Question

I am new to react-native. I am trying to build login form and navigate after successful auth, or print error in failure login.

The failur login case is working fine, but after successfull login, I can't navigate.

Here is the LoginForm.js

import React, { Component } from 'react';
import { Text } from 'react-native';
import { connect } from 'react-redux';
import { loginUser } from './actions';

import { Button, Card, CardItem, Input, Spinner } from './common';

class LoginForm extends Component {

constructor(){
  super();
  this.state = {
    username: '',
    password: ''
  };
}
componentWillReceiveProps(nextProps) {

  if(nextProps.user){
    this.props.navigation.navigate('Home');
  }
}
_onLoginPressed(){
  const { username, password } = this.state;
  this.props.loginUser({ username, password });
}
  _renderButton() {
    if(this.props.loading){
      return <Spinner />
    }
    return (
      <Button onPress={this._onLoginPressed.bind(this)}>Login</Button>
    );
  }

  render() {

    return(
        <Card>

          <CardItem>
             <Input
               label='Email'
               placeholder='Enter your email'
               secureTextEntry={false}
               onChangeText={(username) => this.setState({ username }) }
             />
          </CardItem>

          <CardItem>
             <Input
               label='Password'
               placeholder='Enter your password'
               secureTextEntry
               onChangeText={(password) => this.setState({ password }) }
             />
          </CardItem>

          <Text>{this.props.error}</Text>
          <CardItem>
            { this._renderButton() }
          </CardItem>

        </Card>
    );

  }

}

const mapStateToProps = state => {
  return {
    error: state.auth.error,
    loading: state.auth.loading,
    user: state.auth.user


   }
    }

//Export component to be available for other compnents in the Apps
export default connect(mapStateToProps, { loginUser })(LoginForm);

Here is my RootNavigator.js:

import { StackNavigator } from 'react-navigation';
import Home from './Home';
import LoginForm from './LoginForm';

const RootNavigator = StackNavigator({
  Login: {
    screen: LoginForm,
    navigationOptions: {
      title: 'Login'
    }
  },
  Home: {
    screen: Home,
    navigationOptions: {
      title: 'Home',
      headerLeft: false
    }
  }
});

export default RootNavigator;

Home.js:

 import React, { Component } from 'react';
    import { View } from 'react-native';
    import Button from './common/Button';

    class Home extends Component {

    constructor(){
      super();
      this.state = {
        title: 'Title from state'
      };
    }
    _onLoginPressed(){

      this.props.navigation.navigate('Login');
    }

      render() {
    return(
      <View>
      <Button onPress={this._onLoginPressed.bind(this)}>Login</Button>
      </View>
    );
  }
}

export default Home;

When I am have success credentials and login, supposed to navigate to Home screen but I got this error :

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

This error is located at:
    in RCTView
    in Home
    in SceneView
    in RCTView
    in RCTView
    in RCTView
    in AnimatedComponent
    in Screen
    in Card
    in Container
    in RCTView
    in RCTView
createFiberFromElement
    index.delta?platform=android&dev=false&minify=false:10116:24
<unknown>
    index.delta?platform=android&dev=false&minify=false:10818:287
reconcileChildrenAtExpirationTime

Kindly help, what I missed ?

Answer 1

Go to ./common and make sure your components are being exported correctly, especially Button. Because it looks like you have a ./common button and a ./common/Button button

Answer 2

generally you have an issue with when exporting one of those files (Home or LoginForm). so just add the other files to check out it.