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.