React native navigation not displaying stack screen

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

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

Advertisement

Answer