Why Importing Components From Other Files Caused "invariant Violation: Element Type Is Invalid" Error?

I'm fairly advanced in iOS Swift language, but very new in react native framework or javascript language. I also have tried to find the right tutorial for stack navigator for hours

Solution 1:

Try this

importReactfrom'react';
import { StackNavigator } from'react-navigation';
importHomeScreenfrom'./HomeScreen';
importProfileScreenfrom'./ProfileScreen';

constApp = StackNavigator({
  HomeScreen: { screen: HomeScreen },
  ProfileScreen: { screen: ProfileScreen },
}, {
  initialRouteName: 'HomeScreen',
  headerMode: 'none'
});

exportdefault () => <App />;

1. The name of the route should be same not mandatory but recommended.
2. Export the navigation element.
3. I don't even have a AppRegistry script in my project but it is still working.

If any issue comment that down below! Hope this will fix the issue

Note : This will work in react-navigation version 1.5.11

For react-navigation v2 try this code

importReactfrom'react';
import { createStackNavigator } from'react-navigation';
importHomeScreenfrom'./HomeScreen';
importProfileScreenfrom'./ProfileScreen';

constApp = createStackNavigator({
   HomeScreen: { screen: HomeScreen },
   ProfileScreen: { screen: ProfileScreen },
}, {
   initialRouteName: 'HomeScreen',
   headerMode: 'none'
});

exportdefault () => <App />;

Make the navigation script file global to access its props!

Solution 2:

In react-native we don't register every component using AppRegistry.registerComponent, rather we register the parent component and parent component render child component. The changes that you need is to register the App component and export the HomeScreen and ProfileScreen.

Sample

App.js

...constApp=StackNavigator({Home: { screen:HomeScreen },Profile: { screen:ProfileScreen },});AppRegistry.registerComponent('projectName',()=>App)

HomeScreen.js

...
classHomeScreen extends React.Component {
  ...
}
exportdefault HomeScreen;

ProfileScreen.js

...
classProfileScreen extends React.Component {
  ...
}
exportdefault ProfileScreen;

Hope this will help!