Using a component as a header title in React Navigation

Question

I'm trying to put a component as my stack navigator header title. This is the code:

const Test = ({ navigation }) => {
  return (
    <View>
      <Text>Test1</Text>
      <Text>Test2</Text>
    </View>
  );
};

const stackNav = createStackNavigator(
  {
    ProductionList: {
      screen: List,
      navigationOptions: {
        header: {
          title: <Test />
        }
      }
    },
    ProductionBoard: {
      screen: Board
    }
  },
  {
    navigationOptions: {
      headerStyle: {
        backgroundColor: colors.dark
      },
      headerTintColor: "#fff",
      headerTitleStyle: {
        fontWeight: "bold"
      }
    }
  }
);

I'm getting the following error:

TypeError: renderHeader is not a function

This error is located at:
    in StackViewLayout (at withOrientation.js:30)
    in withOrientation (at StackView.js:58)
    in RCTView (at View.js:60)
    in View (at Transitioner.js:146)
    in Transitioner (at StackView.js:22)
    in StackView (at createNavigator.js:96)
    in Navigator (at createKeyboardAwareNavigator.js:11)
    in KeyboardAwareNavigator (at createNavigationContainer.js:393)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at createTabNavigator.js:10)
    in RCTView (at View.js:60)
    in View (at ResourceSavingScene.js:14)
    in RCTView (at View.js:60)
    in View (at ResourceSavingScene.js:10)
    in ResourceSavingScene (at createBottomTabNavigator.js:83)
    in RCTView (at View.js:60)
    in View (at createBottomTabNavigator.js:74)
    in RCTView (at View.js:60)
    in View (at createBottomTabNavigator.js:73)
    in TabNavigationView (at createTabNavigator.js:91)
    in NavigationView (at createNavigator.js:96)
    in Navigator (at createNavigationContainer.js:393)
    in NavigationContainer (at SceneView.js:10)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:96)
    in Navigator (at createNavigationContainer.js:393)
    in NavigationContainer (at App.js:56)
    in RCTSafeAreaView (at SafeAreaView.ios.js:34)
    in SafeAreaView (at AppContainer.js:30)
    in AppContainer (at App.js:55)
    in App (at renderApplication.js:33)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:102)
    in RCTView (at View.js:60)
    in View (at AppContainer.js:122)
    in AppContainer (at renderApplication.js:32)

Any ideas on how to solve that?

Answer 1

You should use headerTitle instead of header: { title.

navigationOptions: {
  headerTitle: // your custom component here
}