How can I implement custom headers in React Navigation v6 with TypeScript?

How can I implement custom headers in React Navigation v6 with TypeScript?

To implement custom headers in React Navigation v6 with TypeScript, you can use the screenOptions prop in your navigator. You can define a custom header component and pass it to the header option.

Can you show me a code example for that?

Sure! Here's a simple example:

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

const Stack = createStackNavigator();

const CustomHeader = () => {
  return <View><Text>My Custom Header</Text></View>;
};

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen 
          name="Home" 
          component={HomeScreen} 
          options={{ header: () => <CustomHeader /> }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

This code sets a custom header for the Home screen.

What if I want to pass props to my custom header?

You can pass props to your custom header by defining a function that returns your header component. For example:

const CustomHeader = ({ title }: { title: string }) => {
  return <View><Text>{title}</Text></View>;
};

options={{ header: () => <CustomHeader title="My Custom Header" /> }}