CODEWITHSUNDEEP
reactjsreact-nativereact-navigation
Mendes
Mendes

Reputation: 18451

Using a component as a header title in React Navigation

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?

Upvotes: 3

Views: 5621

Answers (3)

VAdLusk
VAdLusk

Reputation: 440

You should use headerTitle instead of header: { title. 

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

Upvotes: 3

SGhaleb
SGhaleb

Reputation: 1007

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 />
        }

Upvotes: 2

Harsh Metrey
Harsh Metrey

Reputation: 131

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

Upvotes: 0

Related Questions