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?

I dont see any error, I would try delete the initialRouteName or wrap App component with NavigationContainer — enzou
– enzou, Commented Jan 10, 2021 at 23:47
@EnzoPerez Thank you aswell, it's seems it only works on app.js file once it wrapping the entire file. — Yotam
– Yotam, Commented Jan 11, 2021 at 12:15

achraf elbihi · Accepted Answer · 2023-03-14 10:42:06Z

2

try to remove the parent view , use the like a parent view or use a fragment <> </> the some problem if we use safeareaView

answered Mar 14, 2023 at 10:42

achraf elbihi

314 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

CoderLean · Accepted Answer · 2021-01-10 23:56:56Z

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

answered Jan 10, 2021 at 23:56

CoderLean

2321 silver badge6 bronze badges

Comments

Josué Mendonça · Accepted Answer · 2022-06-26 00:48:27Z

0

The container around your navigation has a background-color, so remove all background-color around it and see again.

answered Jun 26, 2022 at 0:48

Josué Mendonça

5611 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

React native navigation not displaying stack screen

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related