React Native store screen in object and import that object

Question

I'm starting to learn React Native and faced a problem I'm not able to solve.

In the file Screens.js, I want to store all screens in an object and export said object.

// Screens.js example

import { HelloScreen } from './HelloScreen';

export const screens = {
    hello: HelloScreen,
};

Then, I want to import the 'screens' object into App.js an use the 'HelloScreen' there

import { screens } from './screens/Screens';

export default createStackNavigator({
  Home: {
    screen: screens.hello
  },
});

But'screens' is undefined here.

What am I doing wrong? I'm also getting this error message: The component for route 'Home' must be a React component.

Thanks in advance for your help.

Answer 1

I figured it out. I had to change the way I import 'HelloScreen' in 'Screens.js' from this:

import { HelloScreen } from './HelloScreen';

to this:

import HelloScreen from './HelloScreen';