React-native-expo stack navigator not displaying initial screen

Question

I built a login screen in in my react native expo project with the React Native Paper Material Design library and everything was working fine. Then I tried to add in navigation and now the initial screen is blank.

// App.js
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import { PaperProvider } from 'react-native-paper';
import Navigation from './Navigation'; 



export default function App() {
  return (
    <PaperProvider>
    <View style={styles.container}>
      <Text style={styles.headerText}>Checker App</Text>
      
      <Navigation />
      
      
      <StatusBar style="auto" />
    </View>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  headerText: {
    fontSize: 30, 
    fontWeight: 'bold',
    marginBottom: 20,
    color: '#6a1299'
  },
});

// Navigation.js
import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import LoginScreen from './components/LoginScreen'; 
import AnotherScreen from './components/AnotherScreen';

const Stack = createStackNavigator();

const Navigation = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="LoginScreen">
        <Stack.Screen name="LoginScreen" component={LoginScreen} />
        <Stack.Screen name="AnotherScreen" component={AnotherScreen} />
        {/* Define other screens here */}
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default Navigation;

// LoginScreen.js
import * as React from 'react';
import { TextInput, Button } from 'react-native-paper';
import { View, Text } from 'react-native';


const LoginScreen = ({navigation}) => {
  const [email, setEmail] = React.useState("");
  const [password, setPassword] = React.useState("");
  const [passwordVisible, setPasswordVisible] = React.useState(false);

  const togglePasswordVisibility = () => {
    setPasswordVisible(!passwordVisible);
  };



  return (
    <>
    <View>
    <TextInput
      label="Email"
      value={email}
      onChangeText={text => setEmail(text)}
      mode='outlined'
      style={{ width: 300, marginBottom: 6 }} 
    />
    <TextInput
      label="Password"
      value={password}
      onChangeText={text => setPassword(text)}
      mode="outlined"
      secureTextEntry={!passwordVisible}
      style={{ width: 300 }} 
      
    />
    <Button
        icon={passwordVisible ? "eye" : "eye-off"} // Toggle the eye icon based on passwordVisible state
        onPress={togglePasswordVisibility}
        style={{ position: 'absolute', top: 75, right: 0 }}
      />
    </View>
    <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 16 }}>
    <Button style={{ marginRight: 10, width: 130 }} icon="home" mode="contained" onPress={() => console.log('Login Pressed')}>
    Login
  </Button>
  <Button onPress={() => navigation.navigate('AnotherScreen')} style={{ width: 130 }} icon="account-plus" mode="outlined" >
    Sign up
  </Button>
    </View>
    </>
  );
};

export default LoginScreen;

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

const AnotherScreen = () => {
  return (
    <View>
      <Text>This is Another Screen</Text>
    </View>
  );
};

export default AnotherScreen;

Actually, the initial screen is not completely blank. The Text element of the App.js page is appearing at the top of the page, but it's not in the same position as it was before. It's covering up part of the top menu of my Android phone.

I don't see any errors.

I tried commenting out everything in the LoginScreen.js file and replaced it with just a simple component and it works fine (of course after adding it to the App.js file).

I tried updating versions of everything but ended up what I've been told is dependency hell for a couple of hours, eventually having to revert the local project to the previous version from the GitHub repository.

I also tried wrapping my App.js component in the navigation container, as another similar question on here seems to have been solved by that method. And I tried moving the navigation container to wrap various other parts, with no success.

Answer 1

Wrap LoginScreen with SafeAreaView and style flex: 1:

import { SafeAreaView } from 'react-native';

...

return (
  <SafeAreaView style={{flex: 1}}>
    <View>
    <TextInput
      label="Email"
      value={email}
      onChangeText={text => setEmail(text)}
      mode='outlined'
      style={{ width: 300, marginBottom: 6 }} 
    />
    ...
    ...
    ...
  </SafeAreaView>
)