How can I customize the header layout in React Navigation v6?

How can I customize the header layout in React Navigation v6?

You can customize the header layout in React Navigation v6 by using the header option in your screen options.

Can you give me an example of how to implement a custom header?

Sure! You can create a custom header component and pass it to the header option like this:

import { createStackNavigator } from '@react-navigation/stack';
import CustomHeader from './CustomHeader';

const Stack = createStackNavigator();

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

What if I want to add buttons to the header?

You can add buttons to your custom header by including them in your CustomHeader component. For example:

function CustomHeader() {
  return (
    <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
      <Button title="Back" onPress={() => {/* handle back */}} />
      <Text>Title</Text>
      <Button title="Settings" onPress={() => {/* handle settings */}} />
    </View>
  );
}