Screen not loading when trying to navigate between screens - react-native

Question

I'm trying to navigate between 7 screens in react native and when I load my code the screens show up blank. I don't know if there's a problem inside my app.js file or whether it's in the login screen file. I'm trying to create a social media app with react native which should in turn navigate between all of these screens without any errors.
My App.js file is:
import home from "./screens/home";
import explore from "./screens/explore";
import createpost from "./screens/createpost";
import messages from "./screens/messages";
import profile from "./screens/profile";
import settings from "./screens/settings";
import login from "./screens/login";
import { NavigationContainer } from "#react-navigation/native";
import { createStackNavigator } from "#react-navigation/native-stack";
const Stack = createNativeStackNavigator();
export default function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="login"
component={login}
options={{title: "Welcome"}}
/>
<Stack.Screen
name="home"
component={home}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
My login screen file is:
import { NavigationContainer } from '#react-navigation/native';
import { StatusBar } from 'expo-status-bar'
import { StyleSheet, Text, View, Button } from 'react-native';
export default function login() {
return (
<View style={styles.container}>
<Button title="Navigate to second screen with french"
onPress={() => navigation.navigate("explore", { language: "french"})}
/>
<Button title="Navigate to second screen with english"
onPress={() => navigation.navigate("explore", { language: "french"})}
/>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Answer 1

You should add the pages you want to
navigate to in your stack as you did with login and home.
<Stack.Navigator>
<Stack.Screen
name="login"
component={login}
options={{title: "Welcome"}}
/>
<Stack.Screen
name="home"
component={home}
/>
<Stack.Screen
name="explore"
component={explore}
/>
...
</Stack.Navigator>
Then
navigation.navigate('explore', {...});
should work.