react native navigate between screens

Question

i am trying to to navigate between two screen but it does not work here my code when i run the code it gives errors

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import {MainPage, ListPage, DetailPage} from './pages';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Screen name="Main" component={MainPage}  />
      <Stack.Screen name="List" component={ListPage} />
      <Stack.Screen name="Detail" component={DetailPage} />
      
    </NavigationContainer>
  );
}

export default App;

Answer 1

Update your code to following.

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

import {MainPage, ListPage, DetailPage} from './pages';

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Main" component={MainPage}  />
        <Stack.Screen name="List" component={ListPage} />
        <Stack.Screen name="Detail" component={DetailPage} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}
export default App;

You can find more details on how to use Stack Navigator here .

Answer 2

use <Stack.Navigator> tag after <NavigationContainer> tag

<NavigationContainer>
  <Stack.Navigator>
    <Stack.Screen name="Main" component={MainPage}  />
    <Stack.Screen name="List" component={ListPage} />
    <Stack.Screen name="Detail" component={DetailPage} />
  </Stack.Navigator>
</NavigationContainer>