How do I set screen options in React Navigation v6 with TypeScript?

How do I set screen options in React Navigation v6 with TypeScript?

You can set screen options in React Navigation v6 by using the screenOptions prop in your navigator. For TypeScript, ensure your screen components are typed correctly.

Can you show me an example of how to do that?

Sure! Here's a simple example:

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

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerStyle: { backgroundColor: 'blue' },
          headerTintColor: '#fff',
          headerTitleStyle: { fontWeight: 'bold' },
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

What if I want to set options for individual screens?

You can set options for individual screens by using the options prop directly on the Screen component. For example:

<Stack.Screen 
  name="Details" 
  component={DetailsScreen} 
  options={{ title: 'Detail View' }} 
/>