When use curly brackets on react-native export

Question

After create some components and export it in the logs show:

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

Some answers that i read about this topic complicated more about import and export on react-native.

so, doubt is:

if the component is not dynamic export with curly brackets? and if dynamic export without curly brackets and with default?

Answer 1

here is the answer

Exporting without default means it's a "named export". You can have multiple named exports in a single file. So if you do this,

export class Template {}
export class AnotherTemplate {}

then you have to import these exports using their exact names. So to use these components in another file you'd have to do,

import {Template, AnotherTemplate} from './components/templates'

Alternatively if you export as the default export like this,

export default class Template {}

Then in another file you import the default export without using the {}, like this,

import Template from './components/templates'

There can only be one default export per file. In React it's a convention to export one component from a file, and to export it is as the default export.

You're free to rename the default export as you import it,

import TheTemplate from './components/templates'

And you can import default and named exports at the same time,

import Template,{AnotherTemplate} from './components/templates'

Answer 2

You should use the curly braces for import a module only if the module is just exported, and if the module is exported as default exported module, you should import it without curly braces.

Exported module example 1:

...
export SomeModule;

then you should import it as below:

import { SomeModule } from 'someWhere'
...

Exported module example 2:

...
export default SomeModule;

then you should import it as below:

import SomeModule from 'someWhere'
...