Trying to export a react native stack navigation - react-native

Question

i am trying to export a react native stack navigation but i am getting an error
*Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
*ERROR Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <ForwardRef(NavigationContainerInner) />. Did you accidentally export a JSX literal instead of a component?
Check the render method of 'TopsCloset'.
Stack navigation - File a
function TopsScreen ({navigation}) {
return(
<View>
<TouchableOpacity
onPress={() => navigation.navigate('TopsScreen')}
>
<Image
style= {liststyles2.listitems}
source={require('./images/tops.png')}
/>
</TouchableOpacity>
<Text style={liststyles2.listtext}>Tops</Text>
</View>
)
}
export {TopsScreen}
function TopsScreenCont ({navigation}) {
return(
<View>
<Text style={liststyles2.listtext}>Tops</Text>
</View>
)
}
export {TopsScreenCont}
const TopsNavStack = createStackNavigator();
function TopsScreenNav() {
return (
<TopsNavStack.Navigator>
<TopsNavStack.Screen name="TopsScreen" component={TopsScreen} />
<TopsNavStack.Screen name="TopsScreenCont" component={TopsScreenCont} />
</TopsNavStack.Navigator>
);
}
export {TopsScreenNav}
function TopsScreenExport() {
return(
<NavigationContainer independent = {true}>
<TopsNavStack />
</NavigationContainer>
);
}
export default TopsScreenExport();
Trying to import TopsScreenExport both with and without {}.
FIle b - trying to import the stack
import TopsScreenExport from './Tops'
const TopsCloset = () => {
return (
<View>
<TopsScreenExport />
</View>
);
}
I am trying to create just a simple stack navigation to work with touchable opacity. Note on the App file the i already call a bottomtabsnavigator which is working fine.

Answer 1

Well problem solved.
What i had wrong was the export default, indeed , and i had to import the second component
export function TopsScreenExport() {
return (
<NavigationContainer independent={true}>
<TopsNavStack />
</NavigationContainer>
);
}
And
export function TopsScreen({ navigation }) {
return (
<View>
<TouchableOpacity onPress={() => navigation.navigate('TopsScreen')}>
<Image style={liststyles2.listitems} source={require('./images/tops.png')} />
</TouchableOpacity>
<Text style={liststyles2.listtext}>Tops</Text>
</View>
);
}
And on the Myitems.js
import { TopsScreenExport, TopsScreen } from 'Tops.js'