javascript - React native navigation not displaying stack screen

Question

I'm using React Native Navigation dependency as route. But I have problem in the following code which appears to do nothing.

I'm trying to create 2 screens, one is login, the other is register (later on I will add button to move between them, right now even the default screen doesn't work).

App.JS

import React from 'react';
import { View, StatusBar, Text } from 'react-native';
import Login from './login.js';

export default function App() {
  return (
    <View>
       <StatusBar barStyle="dark-content" hidden={false} backgroundColor="#ffffff" translucent={true}/>
       <Login/>
    </View>
  );
}

Login.JS

import React from 'react';
import Register from './register.js';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

function LoginScreen() {
  return (
    <View style={{ flex: 1, paddingTop: 100, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}


const Stack = createStackNavigator();

function Login() {
    return (
      <View style={styles.container}>
        <Text style={styles.logo}>My Title</Text>
        <Text style={styles.slogan}>Welcome</Text>
      

        <NavigationContainer>
          <Stack.Navigator initialRouteName="Login">
            <Stack.Screen name="Login" component={LoginScreen} />
            <Stack.Screen name="Register" component={Register} />
          </Stack.Navigator>
        </NavigationContainer>

      </View>
    );
  }

  export default Login;

By reading the docs that should work, but I can't understand what is wrong here.

I receive blank area in the stack screen area.

I have tried to replace Register component with function, didn't work either.

How can I display React Native Navigation stack screen correctly?

Answer 1

How about having the Navigation Container wrap the contents of App.js then you can leave the Stack navigator and screens in the Login component