Hola, estoy implementando la navegación de reacción en una aplicación nativa de reacción y estoy siguiendo los documentos sobre la navegación de reacción. Y yo cuando ejecuto el código este es el resultado:

Mi pregunta es cómo hago para que el ancho del contenido central sea el mismo que el de la pantalla. Además, es la primera vez que uso react native expo después de cambiar de reactJS

Código: código del navegador:

 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;

Aplicación.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;