React navigation content size too narrow

Question

Hi I am implementing react navigation in a react native app, and I am following the docs on react navigation. And I when I run the code this is the result:

My question is how do I make the center content's width same as the screen. Also, his is my first time using react native expo after switching from reactJS

Code: navigator code:

import Login from "./Login";
import Signup from "./Signup";
import {
  createAppContainer,
  NavigationContainer,
  NavigationNavigator,
} from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import Chat from "./Chat";
import Error from "./Error";

/**
 * This is the screen stack of the navigation stack.
 */

const screens: any = {
  default: { screen: Login },
  signup: { screen: Signup },
  chat: { screen: Chat },
  Error: { screen: Error },
};

const stack: NavigationNavigator<any, any> = createStackNavigator(screens);

const container: NavigationContainer = createAppContainer(stack);

export default container;

App.tsx:

import { StatusBar } from "expo-status-bar";
import React from "react";
import { Alert, StyleSheet, Text, View } from "react-native";
import * as expoAppLoading from "expo-app-loading";
import loadFonts from "./assets/fonts/loader";
import Navigator from "./screens/navigator";

/**
 * This is the main app component of the Chill&chat application.
 */

const App: React.FC = () => {
  const [loading, setLoading] = React.useState(true);

  const style: any = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: "#fff",
      alignItems: "center",
      justifyContent: "center",

    },
    text: {
      fontFamily: "poppinsBold",
    },
  });

  if (loading) {
    return (
      <expoAppLoading.default
        startAsync={async (): Promise<void> => {
          await loadFonts();
        }}
        onFinish={(): void => {
          setLoading(false);
        }}
        onError={(): void => {
          Alert.alert("Error", "Error loading fonts");
        }}
      />
    );
  } else {
    return (
      <View style={style.container}>
        <Navigator />
        <StatusBar style="auto" />
      </View>
    );
  }
};

export default App;