React navigation content size too narrow

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;

Answer

You should be able to set the width by adding percentage dimensions to your style sheet for the desired element. This may require you do away with flex layout however, or use flex in a parent instead.

    container: {
      width:'100%',
    },

This should solve for the width problem though.

Advertisement

Answer