Styling Header with React Navigation(From V3 to V5)

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