3

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?

4

3 Answers 3

3

You should use headerTitle instead of header: { title.

navigationOptions: {
  headerTitle: // your custom component here
}
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 />
        }
4
  • I'm aware of it, but using this way the header does not shows up on screen, getting an empty header title...
    – Mendes
    Aug 23, 2018 at 13:53
  • are you using v1 or v2 of react-navigation?
    – SGhaleb
    Aug 23, 2018 at 14:00
  • I'm using the latest version (2.0.4)
    – Mendes
    Aug 23, 2018 at 14:04
  • 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.
    – SGhaleb
    Aug 23, 2018 at 14:20
0

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",
  },
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.