How do I use the Stack Navigator in React Navigation?

How do I use the Stack Navigator in React Navigation?

To use the Stack Navigator, first install the necessary packages: @react-navigation/native and @react-navigation/stack. Then, set up your navigator in your app.

Can you show me a basic example?

Sure! Here's a simple example:

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

What are the main features of Stack Navigator?

The Stack Navigator allows you to manage a stack of screens, enabling navigation back and forth. It supports gestures, header customization, and transition animations.

How can I customize the header?

You can customize the header by using the options prop in the Stack.Screen. For example:

<Stack.Screen 
  name="Home" 
  component={HomeScreen} 
  options={{ title: 'My Home' }} 
/>