ReactNative: Component inline and for navigation - react-native

Question

I am beginning with ReactNative and try to get a component I can navigate to as well as use inline.
MyComp is the component. In Home I try to navigate to MyComp by a button as well as have it inline with .
App.js
import React from 'react';
import { StyleSheet, Text, View, Button, Alert, Image} from 'react-native';
import {createStackNavigator, createAppContainer} from 'react-navigation';
import Home from "./Home";
import MyComp from "./MyComp";
const navi = createStackNavigator({
Home: {screen: Home},
MyComp: {screen: MyComp}
});
const App = createAppContainer (navi);
export default App;
Home.js
import React from 'react';
import {StyleSheet, Text, View, Button, Alert} from 'react-native';
import {navigate} from 'react-navigation';
import {MyComp} from "./MyComp";
export default class Home extends React.Component
{
static navigationOptions = {title: 'At Home'};
render()
{
return (
<View style={{ alignItems: 'center', justifyContent: 'center', flex: 1}}>
<Button
title={"Goto MyComp"}
onPress={() => this.props.navigation.navigate('MyComp')}/>
<MyComp/> {/* Compiler Error */}
</View>
);
}
}
MyComp.js
import React from 'react';
import {Text, View, Button} from 'react-native';
export default class MyComp extends React.Component
{
render()
{
return (
<View>
<Text>Here I am</Text>
</View>
);
}
}
But the inline produces an error.
Invariant Violation: Invariant Violation: Element type is invalid:
expected a string (for built-in components) or a class/function (for
composite components) but got: undefined. You likely forgot to export
your component from the file it's defined in, or you might have mixed
up default and named imports.
Check the render method of Home.
I am not sure whats the problem here. Is it not possible to use a component in both ways?

Answer 1

remove brackets when u import component in home screen
change
import {MyComp} from "./MyComp";
to
import MyComp from "./MyComp";