How can I customize navigation in React Native Web?

How can I customize navigation in React Native Web?

You can customize navigation in React Native Web by using libraries like React Navigation. Would you like a code example?

Yes, please provide a code example for a custom header.

Sure! Here's a simple example:

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

const Stack = createStackNavigator();

function MyStack() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ headerTitle: 'My Custom Header' }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

What if I want to add a button to the header?

You can add a button to the header by using the headerRight option. Here's how:

<Stack.Screen name="Home" component={HomeScreen} options={{
  headerTitle: 'My Custom Header',
  headerRight: () => (
    <Button onPress={() => alert('Button pressed!')} title="Info" />
  ),
}} />