Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) in react native project

There is a difference between named exports and default exports.

Named Export

Can be used for top level values of a module, e.g.

export const fetch = () => {

}

export const Component = () => {
    return <></>
}

The above can be imported using

import { fetch, Component } from "./MyModule"

Notice the curly braces.

Default Export

A default export can only be used once per file, e.g.

const Component = () => {
    return <></>
}

export default Component;

The above can be imported using

import Component from "./MyModule"

Notice that we have not used curly braces here.

The error message

Error: 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, or you might have mixed up default and named imports.

tells us that we have mixed this up for some of our imports. Your imports for View, Image, StyleSheet and useWindowDimensions are correct. Hence, either CustomInput or Logo is not correctly imported (or exported; it depends on how we want to see it).

You are assuming default exports for both. Check if they are exported using default export.

If you do not want to use default exports, then you need to change your import statements to the following.

import { CustomInput } from '../../components/CustomInput';

Furthermore, check that the import paths, e.g. '../../../assetss/images/logo.png' and '../../components/CustomInput', are correct.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)