How can I customize React Navigation v6 with TypeScript?

How can I customize React Navigation v6 with TypeScript?

You can customize React Navigation v6 by creating custom navigators and screens using TypeScript. Would you like a code example?

Yes, please provide a code example for a custom stack navigator.

Sure! Here's a simple example:

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

const Stack = createStackNavigator();

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

export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

This sets up a basic stack navigator with two screens.

How can I add custom header styles to the stack navigator?

You can customize the header by using the screenOptions prop. Here's how:

<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>