Styling Header with React Navigation(From V3 to V5) - react-native

Question

So I'm following along with this tutorial trying to make an app with react native and it uses v3 of react-navigation but I'm trying to use v5. The issue is with this the styling that was previously working in the old version no longer does.
**// setup of navigator**
const Stack = createStackNavigator();
const Travel = () => {
return (
<Stack.Navigator initialRouteName="List">
<Stack.Screen name="Article" component={Article} />
<Stack.Screen
name="List"
component={List}
options={{
title: null,
}}
/>
</Stack.Navigator>
);
};
**// screen in question - List**
const styles = StyleSheet.create({
flex: {
flex: 1,
},
row: {
flexDirection: 'row',
},
header: {
backgroundColor: 'orange',
},
});
export default class List extends React.Component {
static navigationOptions = {
header: (
<View style={[styles.flex, styles.row, styles.header]}> **// styles won't get applied for some reason**
<View>
<Text>Search for a place</Text>
<Text>Destination</Text>
</View>
<View>
<Text>Avatars</Text>
</View>
</View>
),
};
render() {
return <Text>List</Text>;
}
}
I'm at a loss to make this work and look like this: goal navigation
Any idea how to update this code from this v3 version in the tutorial to the v5 support version of react-navigation?
UPDATE:
I've gotten closer to the goal with this code:
import React from 'react';
import { createStackNavigator } from '#react-navigation/stack';
import { Text, View } from 'react-native';
import Article from '../screens/Article';
import { List } from '../screens/List';
const Stack = createStackNavigator();
const ListHead = () => {
return (
<View
style={{
flex: 1,
flexDirection: 'row',
justifyContent: 'space-around',
backgroundColor: 'orange',
}}
>
<View>
<Text>Search for a place</Text>
<Text>Destination</Text>
</View>
<View>
<Text>Avatars</Text>
</View>
</View>
);
};
const Travel = () => {
return (
<Stack.Navigator initialRouteName="List">
<Stack.Screen name="Article" component={Article} />
<Stack.Screen
name="List"
component={List}
options={{
headerTitle: () => <ListHead />,
}}
/>
</Stack.Navigator>
);
};
export default Travel;
However I can't get these to properly be spaced apart like the goal photo and they don't take up the full width.

Answer 1

In react-navigation v5 you can use headerLeft and headerRight for a custom navigation header like this. You can also specify the styling according to your needs.
Here is the code example
export default class List extends React.Component {
static navigationOptions = {
headerLeft: () => (
<View>
<Text>Search for a place</Text>
<Text>Destination</Text>
</View>
),
headerRight: () => (
<View>
<Text>Avatars</Text>
</View>
),
// you can specify your styles here also
headerStyle: {},
headerRightContainerStyle: {},
headerLeftContainerStyle: {},
};
render() {
return <Text>List</Text>;
}
}
I hope this will help you out.!