Importing a function from a different file in React Native - react-native

Question

Background:
I've created a Screens.js file which contains each separate screen as a function. Then I'm calling the screens from App.js.
What I have tried
This is a mockup of what I have in the Screens.js file.
import React from 'react';
import {StyleSheet, View, Text, Image, Button, TextInput} from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
export const LoginScreen = ({ navigation }) => {
return (
<View>
<Text> This is a Login Screen </Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
)
}
export const HomeScreen = ({ navigation }) => {
return (
<View>
<Text> This is a Home Screen </Text>
</View>
)
}
And this is App.js
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { NavigationContainer } from '#react-navigation/native';
import { createBottomTabNavigator } from '#react-navigation/bottom-tabs';
import { createStackNavigator} from '#react-navigation/stack';
import { LoginScreen, HomeScreen } from './app/Screens.js';
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Login" component={ LoginScreen } />
<Stack.Screen name="Home" component={ HomeScreen } />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
Problem
When I try and run the app in expo, I get the following error message: "Invariant Violation: Module RCTEventEmitter is not a registered callable Module (calling recieveTouches)" I have absolutely no idea what any of this means, I don't even know what an RCTEventEmitter or recieveTouches actually is.
Question
Is this the correct method to import a function from a separate file? Is there any better way? Maybe the problem isn't even related to the calling of the functions? (Note: I've tried other methods in the past but they all failed, so it probably is an export-import issue.)
Thanks a lot!

Answer 1

you can't do that.
try this
exports.default = {
LoginScreen : ({ navigation }) => {
return (
<View>
<Text> This is a Login Screen </Text>
<Button
title="Go to Home"
onPress={() => navigation.navigate('Home')}
/>
</View>
)
},
HomeScreen : ({ navigation }) => {
return (
<View>
<Text> This is a Home Screen </Text>
</View>
)
}
}
this is a hint, not exact code.