React native expected a string or class function but got undefined

Question

I am getting this error: builded with expo
Trouble in import containers to main file app.js

SignIn code

import React, { Component } from 'react';
import LoginForm from '../components/LoginForm';
export default class SignIn extends Component {
  render() {
        return (
            <View>
               <Text>
               </Text>
            </View>
        );
    }
}

App.js code

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
import SignIn from './app/containers';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>

        <Text style={styles.instructions}>
          Ma App
        </Text>

         <SignIn />
      </View>
    );
  }
}

if I remove signIn it's work!

Error on screen

Answer 1

Most likely the path to your SignIn component is incorrect, or you are missing the index.js export. You can test this theory by console logging the component SignIn ; you will find it prints undefined .

The reason is you are attempting to import a default module SignIn from path ./app/containers . Assuming that is a valid path, you are attempting to import the default export from ./app/containers/index.js . This is unlikely to be correct as the index.js (AKA barrel) purpose is to export multiple public modules from an app directory.

Assuming your index.js is defined correctly, and includes the following or similar.

export { default as SignIn } from './SignIn.js';

Then you should update your import of SignIn to import a named module instead of the default module; as follows.

import { SignIn} from './app/containers';

Alternatively, you could import the default module direct from the component's source file.

import SignIn from './app/containers/SignIn';

Hope this helps!