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

import React from 'react';
import { StackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

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

export default () => <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

import React from 'react';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './HomeScreen';
import ProfileScreen from './ProfileScreen';

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

export default () => <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

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

HomeScreen.js

...
class HomeScreen extends React.Component {
  ...
}
export default HomeScreen;

ProfileScreen.js

...
class ProfileScreen extends React.Component {
  ...
}
export default ProfileScreen;

Hope this will help!