Create index file full of exports react-native

Question

Is it possible in react native to create an index file from which you can refer to for imports rather than doing '../../folder/component'?

I have tried a few different methods, including the following:

components folder

-> chat
  -> Chat.js
-> dashboard
  -> Dashboard.js
-> home
  -> Home.js
-> index.js

index.js

import Home from './home/Home'
import Dashboard from './dashboard/Dashboard'
import Chat from './chat/Chat'

module.exports = {
    Home,
    Dashboard,
    Chat,
}

Then inside a component, lets say Dashboard, import { Home, Chat } from '../components'

Another method:

index.js

export Home from './home/Home'
export Dashboard from './dashboard/Dashboard'
export Chat from './chat/Chat'

I also tried surrounding the export with curlies, ex export { Home } from './home/Home' because the compiler threw an error otherwise, but it still did not work this way.

I also tried the method inside this users question Requiring Modules in react-native

Is this functionality possible in react-native?

Ankit Aggarwal · Accepted Answer · 2017-06-20T18:48:44.697

16

Yes, it is possible. Do the following.

Do named exports from Component files.

from Home.js

export { Home };

from Chat.js

export { Chat };

from Dashboard.js

export { Dashboard };

where Home, Chat and Dashboard are the components names in the respective files.

Now in your index.js Do following:

export * from './home/Home';
export * from './chat/Chat';
export * from './dashboard/Dashboard';

use them in other files like this:

import { Home, Chat, Dashboard } from '../components'

Update 1

If you are using redux and want to export the component which is connected to the store, then use the following:

Store the connected component in a const variable like this:

const HomeComponent = connect(mapStateToProps, mapDispatchToProps)(Home)

then export it like this:

export { HomeComponent }

edited Jun 20 '17 at 18:48

answered Jun 16 '17 at 17:07

Ankit Aggarwal

2,941
2
17
26

Do you know how to do this in this case where I am using redux and my export statement for my component looks like `export default connect(mapStateToProps, mapDispatchToProps)(Home)`? Wrapping Home in {} throws error, ex. `connect(...)({Home})` – wizloc Jun 16 '17 at 17:25
connect is an HOC (higher order component) which returns a component. So store that in a const variable like this: const HomeComponent = connect(mapStateToProps, mapDispatchToProps)(Home) and then write export { HomeComponent }. That should work. I haven't tested that. Can you try that please. – Ankit Aggarwal Jun 16 '17 at 17:31
@wizloc please tell if that worked for you or not. I will update the answer accordingly. – Ankit Aggarwal Jun 17 '17 at 18:19
I was not able to get it to work, but I will take another look on Monday and see what the issue is – wizloc Jun 17 '17 at 21:44
I tried the above suggested method (storing the connected component in a variable and exporting it using named export) and its working for me. Hope it works for you as well – Ankit Aggarwal Jun 18 '17 at 05:48
@wizloc have you found the solution? – Ankit Aggarwal Jun 20 '17 at 10:56
I am using your method. `export { Home }`, then inside index.js `export * from '/home/Home` and inside the component I want to use it `import { Home } from '../components'`. I then try to use in the render of the component I import it in but I get error `Element type is invalid: expected a string or a class/function. Check the render method of...` – wizloc Jun 20 '17 at 13:00
I see my error. I was doing export default { Home }. Removing default keyword makes it work. Thanks – wizloc Jun 20 '17 at 13:16
great. I will update the answer to include these details as well :) – Ankit Aggarwal Jun 20 '17 at 18:44

Create index file full of exports react-native

1 Answers1