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?

Are you sure the code you shared is the source of the error? Not seeing them in the error stack. — Arup Rakshit
– Arup Rakshit, Commented Aug 23, 2018 at 13:33
The error happens inside React Navigator (RN). All the call stack are internal functions from RN.... — Mendes
– Mendes, Commented Aug 23, 2018 at 13:35
and I see this is the only place where the function is used github.com/facebook/react-native/blob/… — Arup Rakshit
– Arup Rakshit, Commented Aug 23, 2018 at 13:36

VAdLusk · Accepted Answer · 2019-06-22 15:19:47Z

3

You should use headerTitle instead of header: { title.

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

answered Jun 22, 2019 at 15:19

VAdLusk

4503 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

SGhaleb · Accepted Answer · 2018-08-23 16:23:50Z

2

Theres been some changes to the navigation options in react-navigation, version 2 now takes different arguments.

This:

navigationOptions: {
        header: {
          title: <Test />
        }
      }

Can now be done like this

navigationOptions: {
      header: <Test />
    }

or

navigationOptions: {
          headerTitle: <Test />
        }

edited Aug 23, 2018 at 16:23

answered Aug 23, 2018 at 13:50

SGhaleb

1,0031 gold badge14 silver badges31 bronze badges

4 Comments

Mendes Over a year ago

I'm aware of it, but using this way the header does not shows up on screen, getting an empty header title...

SGhaleb Over a year ago

are you using v1 or v2 of react-navigation?

Mendes Over a year ago

I'm using the latest version (2.0.4)

SGhaleb Over a year ago

sorry, i updated the answer, headerTitle is what you use now. Also the latest version is (2.12.0) if you want to update your dependencies.

Harsh Metrey · Accepted Answer · 2018-08-23 14:26:38Z

if you want to use custom header do this, with react-navigation you have some limitations.

    static navigationOptions = {
          header : null
      };


    <View style={styles.header}>
             <TouchableOpacity
                  style={styles.backButton}
                  onPress={() => this.props.navigation.goBack()}>
                    <Image
                      source= 
                      {require("../../../../public/Assets/images/ArrowBack.png")}
                     />
           </TouchableOpacity>
           <Text style={styles.backTitle}>Title</Text>
        </View>


const styles = StyleSheet.create({
    header: {
        flexDirection: "row",
        backgroundColor: "#F5F5F5",
        paddingTop : Platform.OS == 'ios' ? 20 : 0,
    }

 backTitle: {
    fontFamily: Fonts.GothamMedium,
    fontSize: 20,
    marginLeft : 10,
    marginTop: Platform.OS === 'ios' ? 24 : 16,
    marginBottom: Platform.OS === 'ios' ? 20 : 19,
    color: "#414042",
  },
});

Collectives™ on Stack Overflow

Using a component as a header title in React Navigation

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related