Рерайт кода: Навигация между экранами в React Native с React Navigation

Исходный код содержит дублирование компонента NavigationContainer и неправильную структуру приложения. Ниже представлен исправленный и оптимизированный вариант.

Основные изменения

• Удален дублирующийся NavigationContainer из App.js
• Исправлена структура компонентов для корректной работы навигации
• Улучшена читаемость кода и именование файлов

Исправленный код

App.js - точка входа приложения, содержит NavigationContainer:

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, View, Text } from 'react-native';
import AppNavigator from './AppNavigator';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>
      <View style={styles.container}>
        <Text>Welcome</Text>
        <AppNavigator />
        <StatusBar style="auto" />
      </View>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

AppNavigator.js - стек навигации без NavigationContainer:

import React from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import Main from "./components/Main";
import Authentication from "./components/Authentication";

const Stack = createNativeStackNavigator();

export default function AppNavigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Main"
        component={Main}
        options={{ title: 'Home' }}
      />
      <Stack.Screen
        name="Authentication"
        component={Authentication}
        options={{ title: 'Login' }}
      />
    </Stack.Navigator>
  );
}

Main.js - экран с кнопкой перехода:

import React from "react";
import { StyleSheet, Text, View, Button } from 'react-native';

export default function Main({ navigation }) {
  const loadScene = () => {
    navigation.navigate('Authentication');
  };

  return (
    <View style={styles.container}>
      <Text>Main Screen</Text>
      <Button title='Go to Login' onPress={loadScene} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

После этих исправлений навигация должна работать корректно, ошибок не возникнет.