React Native NavigationContainer not displaying anything

Question

I'm having an issue using React Native with React Navigator where I'm not seeing a navigation menu at all. I'm using the following code:

App.js:

import "react-native-gesture-handler";
import React from "react";
import { StyleSheet, View } from "react-native";
import { QUATERNARY_COLOR } from "./env.json";
import Header from "./components/header";
import Routes from "./components/routes";

const App = () => {
  return (
    <View style={styles.home}>
      <Header />
      <Routes style={styles.routes} />
    </View>
  );
};

const styles = StyleSheet.create({
  home: {
    flex: 1,
    backgroundColor: QUATERNARY_COLOR,
    alignItems: "center",
    paddingTop: 60,
  },
});

export default App;

Header.js:

import React from "react";
import { StyleSheet, Text, View, Dimensions } from "react-native";
import { APP_NAME, PRIMARY_COLOR, QUATERNARY_COLOR } from "../env.json";

var width = Dimensions.get("window").width;

const Header = () => {
  return (
    <View style={styles.header}>
      <Text style={styles.text}>{APP_NAME}</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  header: {
    height: 48,
    padding: 8,
    paddingRight: 12,
    paddingLeft: 12,
    backgroundColor: PRIMARY_COLOR,
    position: "absolute",
    top: 24,
    width: width,
    alignSelf: "stretch",
    textAlign: "center",
  },
  text: {
    color: QUATERNARY_COLOR,
    fontSize: 23,
    fontWeight: "bold",
    textAlign: "center",
  },
});

export default Header;

Routes.js:

import React from "react";
import { Text, View } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../pages/home";
import Login from "../pages/login";

const Stack = createStackNavigator();

const Routes = () => {
  return (
    <React.Fragment>
      <NavigationContainer>
        <Stack.Navigator style={{ flex: 1 }}>
          <Stack.Screen
            name="Home"
            component={Home}
            options={{ title: "Home" }}
          />
          <Stack.Screen name="Login" component={Login} />
        </Stack.Navigator>
      </NavigationContainer>
      <Text>Hello World</Text>
    </React.Fragment>
  );
};

export default Routes;

Home.js:

import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import React from "react";
import { StyleSheet, Text, View, Image } from "react-native";
import { APP_NAME, APP_VERSION, ENVIRONMENT, PRIMARY_COLOR } from "../env.json";

const Home = () => {
  return (
    <View style={styles.home}>
      <Image
        source={require("../assets/android-chrome-192x192-transparent.png")}
        style={styles.logo}
      />
      <Text h1 style={styles.title}>
        {APP_NAME}
      </Text>
      {ENVIRONMENT !== "Production" ? (
        <>
          <Text h5 style={styles.version}>
            Version {APP_VERSION}
          </Text>
          <Text h6 style={styles.environment}>
            Environment: {ENVIRONMENT}
          </Text>
        </>
      ) : (
        ""
      )}
      <StatusBar style="auto" />
    </View>
  );
};

const styles = StyleSheet.create({
  title: {
    color: PRIMARY_COLOR,
    fontSize: 30,
    fontWeight: "bold",
  },
  logo: {
    width: 150,
    height: 150,
    tintColor: PRIMARY_COLOR,
  },
  version: {
    color: PRIMARY_COLOR,
    fontSize: 16,
  },
  environment: {
    color: PRIMARY_COLOR,
    fontSize: 12,
  },
});

export default Home;

Login.js:

import "react-native-gesture-handler";
import { StatusBar } from "expo-status-bar";
import * as React from "react";
import { StyleSheet, TextInput, View, Button } from "react-native";
import { API_URL } from "../env.json";

const Login = () => {
  const [text, onChangeUsername] = React.useState("");
  const [password, onChangePassword] = React.useState("");

  return (
    <View style={styles.login}>
      <Text h1>Login</Text>
      <Text h2>Username</Text>
      <TextInput
        style={styles.input}
        onChangeUsername={onChangeUsername}
        placeholder="Username"
        value={text}
      />
      <Text h2>Password</Text>
      <TextInput
        style={styles.input}
        onChangePassword={onChangePassword}
        placeholder="Password"
        value={password}
        secureTextEntry={true}
      />
      <Button title="Login" />
      <StatusBar style="auto" />
    </View>
  );
};

const styles = StyleSheet.create({
  login: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
  },
  input: {
    height: 40,
    margin: 12,
    borderWidth: 1,
  },
});

export default Login;

This is what I'm seeing on the Android emulator:

I'm looking to have a navigation menu available to the user and also to have the Home page be the default landing page for the application. How do I do this? What am I doing wrong?

Answer 1

Your Home component must have {flex: 1} on it's container. Specifically in your case you've got 'styles.home' but you don't have that value included in your stylesheet.

And remove the {flex: 1} from the navigator.