"HomeScreen" is read-only

I get this error Error: "HomeScreen" is read-only.

I was compiling and executing this expo app via expo-start and then pressing "i" for the IOS simulator. Then it gives me the following error:

Error: "HomeScreen" is read-only.

This error is located at:
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:95:17 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:141:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:39 in handleError
at node_modules/expo/build/errors/ExpoErrorManager.js:25:19 in errorHandler
at node_modules/expo/build/errors/ExpoErrorManager.js:30:24 in \<anonymous\>
at node_modules/@react-native/polyfills/error-guard.js:49:36 in ErrorUtils.reportFatalError

I just don't get it, what does it mean "Read-only"? I have full permission on everything.

I was expecting a "Login Screen" message in the top-left of the screen, respecting the notch and that stuff.

This is my code for app.js:

import { StatusBar } from "expo-status-bar";
import { StyleSheet, Text, View } from "react-native";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from "./screens/LoginScreen";
import HomeScreen from "./screens/HomeScreen";

const Stack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeScreen={}} />
      <Stack.Screen name="Login" component={LoginScreen={}} />
    </Stack.Navigator>
  </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
});

This is for LoginScreen:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const LoginScreen = () => {
  return (
    <View>
      <Text>LoginScreen</Text>
    </View>
  )
}

export default LoginScreen

const styles = StyleSheet.create({})

And this is for HomeScreen:

import { StyleSheet, Text, View } from 'react-native'
import React from 'react'

const HomeScreen = () => {
  return (
    <View>
      <Text>HomeScreen</Text>
    </View>
  )
}

export default HomeScreen

const styles = StyleSheet.create({})

Solution

HomeScreen is a const which is read-only and can only be assigned a value once.

In your Stack.Screen you're setting the component prop to your custom components but assigning some value HomeScreen={}, same for LoginScreen

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen={}} />
  <Stack.Screen name="Login" component={LoginScreen={}} />
</Stack.Navigator>

Instead use

<Stack.Navigator>
  <Stack.Screen name="Home" component={HomeScreen} />
  <Stack.Screen name="Login" component={LoginScreen} />
</Stack.Navigator>