How to implement custom header icons within a (nested) StackNavigator?












2















This might be a noobish question, but although I read the documentation and other sources, I still did not figure out how to implement two or more additional, clickable icons in the header within a StackNavigator, just like in the picture. If the stackNavigator wants to show a back-icon, he is allowed to overwrite the menu-icon.



This is how the (root) home-screen could look like. Once the user starts clicking on the content, the menu-item should be replaced with the back-button from the stackNavigator (ideally on any platform).
Mockup of what I want to achieve.



What I did so far: I started from a brand-new template by choosing the options tabs when running expo init. I did some minor modifications in the file MainTabNavigator.js



import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
import CustomHeader from '../components/CustomHeader';
import HomeScreen from '../screens/HomeScreen';

const HomeStack = createStackNavigator( { Home: HomeScreen }, {
// default config for screens in the stack, so `Home` will use this title
navigationOptions: {
title: 'Protype Prompter: Browse',
header: props => <CustomHeader {...props} />,
}}
);
// All other code stays like provided by expo init.
export default createBottomTabNavigator({
HomeStack,
});


Next, I made sure that within HomeScreen.js the header is not overwritten:



export default class HomeScreen extends React.Component {
/* static navigationOptions = {
header: null,
}; */


Please help me to with my CustomHeader.js. All my efforts so far so did not lead to any visible change on the home screen.



import React from "react";
import { Header } from "react-navigation";
import { View, Platform, Image, StyleSheet } from "react-native";
import { SimpleLineIcons } from '@expo/vector-icons';
const CustomHeader = props => {
return (
<View>
<SimpleLineIcons name="menu" size={24} color={tintColor} />
<Header headerLeft={<SimpleLineIcons name="menu" size={24} color='#6a1b9a' />} {...props} />
</View>
);
};
export default CustomHeader;


Beside other sources, I consulted so far the following websites:




  1. The documentation on headers and header buttons

  2. A github discussion on a react-navitation issue

  3. A howto on modifying headers and another one on customer headers with react-navigation. The latter seemed to be a good starting point.










share|improve this question





























    2















    This might be a noobish question, but although I read the documentation and other sources, I still did not figure out how to implement two or more additional, clickable icons in the header within a StackNavigator, just like in the picture. If the stackNavigator wants to show a back-icon, he is allowed to overwrite the menu-icon.



    This is how the (root) home-screen could look like. Once the user starts clicking on the content, the menu-item should be replaced with the back-button from the stackNavigator (ideally on any platform).
    Mockup of what I want to achieve.



    What I did so far: I started from a brand-new template by choosing the options tabs when running expo init. I did some minor modifications in the file MainTabNavigator.js



    import React from 'react';
    import { Platform } from 'react-native';
    import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
    import CustomHeader from '../components/CustomHeader';
    import HomeScreen from '../screens/HomeScreen';

    const HomeStack = createStackNavigator( { Home: HomeScreen }, {
    // default config for screens in the stack, so `Home` will use this title
    navigationOptions: {
    title: 'Protype Prompter: Browse',
    header: props => <CustomHeader {...props} />,
    }}
    );
    // All other code stays like provided by expo init.
    export default createBottomTabNavigator({
    HomeStack,
    });


    Next, I made sure that within HomeScreen.js the header is not overwritten:



    export default class HomeScreen extends React.Component {
    /* static navigationOptions = {
    header: null,
    }; */


    Please help me to with my CustomHeader.js. All my efforts so far so did not lead to any visible change on the home screen.



    import React from "react";
    import { Header } from "react-navigation";
    import { View, Platform, Image, StyleSheet } from "react-native";
    import { SimpleLineIcons } from '@expo/vector-icons';
    const CustomHeader = props => {
    return (
    <View>
    <SimpleLineIcons name="menu" size={24} color={tintColor} />
    <Header headerLeft={<SimpleLineIcons name="menu" size={24} color='#6a1b9a' />} {...props} />
    </View>
    );
    };
    export default CustomHeader;


    Beside other sources, I consulted so far the following websites:




    1. The documentation on headers and header buttons

    2. A github discussion on a react-navitation issue

    3. A howto on modifying headers and another one on customer headers with react-navigation. The latter seemed to be a good starting point.










    share|improve this question



























      2












      2








      2


      1






      This might be a noobish question, but although I read the documentation and other sources, I still did not figure out how to implement two or more additional, clickable icons in the header within a StackNavigator, just like in the picture. If the stackNavigator wants to show a back-icon, he is allowed to overwrite the menu-icon.



      This is how the (root) home-screen could look like. Once the user starts clicking on the content, the menu-item should be replaced with the back-button from the stackNavigator (ideally on any platform).
      Mockup of what I want to achieve.



      What I did so far: I started from a brand-new template by choosing the options tabs when running expo init. I did some minor modifications in the file MainTabNavigator.js



      import React from 'react';
      import { Platform } from 'react-native';
      import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
      import CustomHeader from '../components/CustomHeader';
      import HomeScreen from '../screens/HomeScreen';

      const HomeStack = createStackNavigator( { Home: HomeScreen }, {
      // default config for screens in the stack, so `Home` will use this title
      navigationOptions: {
      title: 'Protype Prompter: Browse',
      header: props => <CustomHeader {...props} />,
      }}
      );
      // All other code stays like provided by expo init.
      export default createBottomTabNavigator({
      HomeStack,
      });


      Next, I made sure that within HomeScreen.js the header is not overwritten:



      export default class HomeScreen extends React.Component {
      /* static navigationOptions = {
      header: null,
      }; */


      Please help me to with my CustomHeader.js. All my efforts so far so did not lead to any visible change on the home screen.



      import React from "react";
      import { Header } from "react-navigation";
      import { View, Platform, Image, StyleSheet } from "react-native";
      import { SimpleLineIcons } from '@expo/vector-icons';
      const CustomHeader = props => {
      return (
      <View>
      <SimpleLineIcons name="menu" size={24} color={tintColor} />
      <Header headerLeft={<SimpleLineIcons name="menu" size={24} color='#6a1b9a' />} {...props} />
      </View>
      );
      };
      export default CustomHeader;


      Beside other sources, I consulted so far the following websites:




      1. The documentation on headers and header buttons

      2. A github discussion on a react-navitation issue

      3. A howto on modifying headers and another one on customer headers with react-navigation. The latter seemed to be a good starting point.










      share|improve this question
















      This might be a noobish question, but although I read the documentation and other sources, I still did not figure out how to implement two or more additional, clickable icons in the header within a StackNavigator, just like in the picture. If the stackNavigator wants to show a back-icon, he is allowed to overwrite the menu-icon.



      This is how the (root) home-screen could look like. Once the user starts clicking on the content, the menu-item should be replaced with the back-button from the stackNavigator (ideally on any platform).
      Mockup of what I want to achieve.



      What I did so far: I started from a brand-new template by choosing the options tabs when running expo init. I did some minor modifications in the file MainTabNavigator.js



      import React from 'react';
      import { Platform } from 'react-native';
      import { createStackNavigator, createBottomTabNavigator } from 'react-navigation';
      import CustomHeader from '../components/CustomHeader';
      import HomeScreen from '../screens/HomeScreen';

      const HomeStack = createStackNavigator( { Home: HomeScreen }, {
      // default config for screens in the stack, so `Home` will use this title
      navigationOptions: {
      title: 'Protype Prompter: Browse',
      header: props => <CustomHeader {...props} />,
      }}
      );
      // All other code stays like provided by expo init.
      export default createBottomTabNavigator({
      HomeStack,
      });


      Next, I made sure that within HomeScreen.js the header is not overwritten:



      export default class HomeScreen extends React.Component {
      /* static navigationOptions = {
      header: null,
      }; */


      Please help me to with my CustomHeader.js. All my efforts so far so did not lead to any visible change on the home screen.



      import React from "react";
      import { Header } from "react-navigation";
      import { View, Platform, Image, StyleSheet } from "react-native";
      import { SimpleLineIcons } from '@expo/vector-icons';
      const CustomHeader = props => {
      return (
      <View>
      <SimpleLineIcons name="menu" size={24} color={tintColor} />
      <Header headerLeft={<SimpleLineIcons name="menu" size={24} color='#6a1b9a' />} {...props} />
      </View>
      );
      };
      export default CustomHeader;


      Beside other sources, I consulted so far the following websites:




      1. The documentation on headers and header buttons

      2. A github discussion on a react-navitation issue

      3. A howto on modifying headers and another one on customer headers with react-navigation. The latter seemed to be a good starting point.







      react-native






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 21 '18 at 14:10







      B--rian

















      asked Nov 21 '18 at 12:42









      B--rianB--rian

      194321




      194321
























          3 Answers
          3






          active

          oldest

          votes


















          2














          This is pretty easy actually. Considered you are using React Navigation V2 or V3, take a look at the createStackNavigator docs.



          There you have a headerLeft and a headerRight setting which can both take a custom component. So you can easily code up your example header.



          Edit



          So I coded up an example fastly:



          In your App.js:



          import React, { Component } from "react";
          import Navigator from "./navigation/navigation";

          export default class App extends Component {
          render() {
          return <Navigator />;
          }
          }


          navigation.js:



          import { createStackNavigator } from "react-navigation";
          import HomeScreen from "../screens/HomeScreen";

          const RootStack = createStackNavigator({ HomeScreen });

          export default RootStack;


          Now you can design your header on a screen by screen basis like this:



          import React, { Component } from "react";
          import { Platform, StyleSheet, Text, View } from "react-native";
          import { SafeAreaView } from "react-navigation";
          import { Icon } from "react-native-elements";

          const styles = StyleSheet.create({
          container: {
          flex: 1
          },
          icon: {
          paddingLeft: 10
          },
          iconContainer: {
          flexDirection: "row",
          justifyContent: "space-evenly",
          width: 120
          }
          });

          export class HomeScreen extends Component {
          static navigationOptions = {
          title: "Title",
          headerLeft: (
          <Icon
          containerStyle={styles.icon}
          type="ionicon"
          name={Platform.OS === "ios" ? "ios-menu" : "md-menu"}
          />
          ),
          headerRight: (
          <View style={styles.iconContainer}>
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-search" : "md-search"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-heart" : "md-heart"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-more" : "md-more"} />
          </View>
          )
          };

          render() {
          return (
          <SafeAreaView styles={styles.container}>
          <Text>Hi from the HomeScreen.</Text>
          </SafeAreaView>
          );
          }
          }

          export default HomeScreen;


          I used the <Icon /> component from react-native-elements. You can make these icons clickable by giving them an onPress prop.



          Here is a screenshot of the result on iOS:



          enter image description here



          Shameless plug:
          If you want to know more about React Navigation you might like my tutorial in which I guide you through building an application with production ready navigation settings.






          share|improve this answer


























          • I am aware of these, but I do not know where to put it, see my modifications within CustomHeader.js

            – B--rian
            Nov 21 '18 at 13:42











          • @B--rian I'm coding up an example as we speak, give me like fifteen more minutes 😊

            – J. Hesters
            Nov 21 '18 at 13:43











          • Hi, I am still curious how to out-source the navigationOptions into my CustomHeader.js.

            – B--rian
            Nov 21 '18 at 15:49






          • 1





            @B--rian I think other people tried to answer that. Right now, I don't have the time to code up an example for that, too, since it would take way longer than just using navigationOptions. To be honest, I haven't seen a single use case where a <CustomHeader /> would be needed 🤔 What is you goal with the <CustomHeader />? The React Navigation API probably already exposes a nice solution and maybe I can help you find it.

            – J. Hesters
            Nov 21 '18 at 16:09








          • 1





            @B--rian Could you edit your question and post the code that you used while trying out my code? If not, could you answer whether the other styles work (container and iconContainer)? Do note that due to hoisting the styles need to be defined in a seperate styles.js file, or above the class, since we are accessing the styles in a static property. Other than that you could also try just using inline styles containerStyle={{paddingLeft: 10}}.

            – J. Hesters
            Nov 22 '18 at 14:44





















          1














          You can use something like the below mentioned code in your class.



          static navigationOptions = {
          headerTitle: 'Home Page',
          headerRight: (
          <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.logoutClick() }}>
          <Text style={navItemTxt}> Logout</Text>
          </TouchableOpacity >
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.clearCartClick() }}>
          <Image source={require('../images/search/ic_clear_cart.png')}
          style={navItemImg} />
          </TouchableOpacity >
          <ConnectedBadgeTitle navigation={navigation} badgeAction={() => { navigation.navigate('Cart'); }} />
          </View >
          ),
          };





          share|improve this answer
























          • Thanks for the concise example. Where exactly should I put these navigationOptions? Ideally, I would like to have the whole configuration of "headerRight" within CustomHeader.js

            – B--rian
            Nov 21 '18 at 14:08











          • Put it in your HomeScreen class.

            – Manju Basha
            Nov 21 '18 at 14:16













          • I actually had to put it into MainTabNavigation.js into the createStackNavigator.

            – B--rian
            Nov 22 '18 at 13:34



















          0














          let consider if route.js like following



          import {
          StackNavigator,
          } from 'react-navigation';
          import Home from './home.js';
          import Login from './login.js';

          export default Navigator = StackNavigator({
          Home: { screen: Home },
          Login: { screen: Login },
          });


          Using native-base can create custom header view



          CustomHeader.js



          import { Header,Left, Right, Body, Thumbnail } from 'native-base';
          <Header style={{ backgroundColor: '#f8f8f8', alignItems: 'center', justifyContent: 'center' }}>
          <Left style={{ flexDirection: 'row' }}>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Left>
          <Body style={{}}>
          <Text style={{}}>Name</Text>
          </Body>
          <Right>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Right>
          </Header>


          home.js file like following



          for Drawer Drawer component



          static navigationOptions = {
          header: null,
          };


          under your drawer component can create custom header



          render(){
          return(
          <Drawer > //Assumed you have some drawer component
          <CustomHeader data={"title"}/>
          <ScrollView>
          </ScrollView>
          </Drawer>
          )
          }





          share|improve this answer
























          • Thanks for your lines. I am a bit confused since you are using a Drawer-component, I am not (yet) using. In my situation it is a StackNavigator within a TabNavigator, see modified question.

            – B--rian
            Nov 21 '18 at 13:46











          Your Answer






          StackExchange.ifUsing("editor", function () {
          StackExchange.using("externalEditor", function () {
          StackExchange.using("snippets", function () {
          StackExchange.snippets.init();
          });
          });
          }, "code-snippets");

          StackExchange.ready(function() {
          var channelOptions = {
          tags: "".split(" "),
          id: "1"
          };
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function() {
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled) {
          StackExchange.using("snippets", function() {
          createEditor();
          });
          }
          else {
          createEditor();
          }
          });

          function createEditor() {
          StackExchange.prepareEditor({
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: true,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: 10,
          bindNavPrevention: true,
          postfix: "",
          imageUploader: {
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          },
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          });


          }
          });














          draft saved

          draft discarded


















          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412278%2fhow-to-implement-custom-header-icons-within-a-nested-stacknavigator%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown

























          3 Answers
          3






          active

          oldest

          votes








          3 Answers
          3






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









          2














          This is pretty easy actually. Considered you are using React Navigation V2 or V3, take a look at the createStackNavigator docs.



          There you have a headerLeft and a headerRight setting which can both take a custom component. So you can easily code up your example header.



          Edit



          So I coded up an example fastly:



          In your App.js:



          import React, { Component } from "react";
          import Navigator from "./navigation/navigation";

          export default class App extends Component {
          render() {
          return <Navigator />;
          }
          }


          navigation.js:



          import { createStackNavigator } from "react-navigation";
          import HomeScreen from "../screens/HomeScreen";

          const RootStack = createStackNavigator({ HomeScreen });

          export default RootStack;


          Now you can design your header on a screen by screen basis like this:



          import React, { Component } from "react";
          import { Platform, StyleSheet, Text, View } from "react-native";
          import { SafeAreaView } from "react-navigation";
          import { Icon } from "react-native-elements";

          const styles = StyleSheet.create({
          container: {
          flex: 1
          },
          icon: {
          paddingLeft: 10
          },
          iconContainer: {
          flexDirection: "row",
          justifyContent: "space-evenly",
          width: 120
          }
          });

          export class HomeScreen extends Component {
          static navigationOptions = {
          title: "Title",
          headerLeft: (
          <Icon
          containerStyle={styles.icon}
          type="ionicon"
          name={Platform.OS === "ios" ? "ios-menu" : "md-menu"}
          />
          ),
          headerRight: (
          <View style={styles.iconContainer}>
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-search" : "md-search"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-heart" : "md-heart"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-more" : "md-more"} />
          </View>
          )
          };

          render() {
          return (
          <SafeAreaView styles={styles.container}>
          <Text>Hi from the HomeScreen.</Text>
          </SafeAreaView>
          );
          }
          }

          export default HomeScreen;


          I used the <Icon /> component from react-native-elements. You can make these icons clickable by giving them an onPress prop.



          Here is a screenshot of the result on iOS:



          enter image description here



          Shameless plug:
          If you want to know more about React Navigation you might like my tutorial in which I guide you through building an application with production ready navigation settings.






          share|improve this answer


























          • I am aware of these, but I do not know where to put it, see my modifications within CustomHeader.js

            – B--rian
            Nov 21 '18 at 13:42











          • @B--rian I'm coding up an example as we speak, give me like fifteen more minutes 😊

            – J. Hesters
            Nov 21 '18 at 13:43











          • Hi, I am still curious how to out-source the navigationOptions into my CustomHeader.js.

            – B--rian
            Nov 21 '18 at 15:49






          • 1





            @B--rian I think other people tried to answer that. Right now, I don't have the time to code up an example for that, too, since it would take way longer than just using navigationOptions. To be honest, I haven't seen a single use case where a <CustomHeader /> would be needed 🤔 What is you goal with the <CustomHeader />? The React Navigation API probably already exposes a nice solution and maybe I can help you find it.

            – J. Hesters
            Nov 21 '18 at 16:09








          • 1





            @B--rian Could you edit your question and post the code that you used while trying out my code? If not, could you answer whether the other styles work (container and iconContainer)? Do note that due to hoisting the styles need to be defined in a seperate styles.js file, or above the class, since we are accessing the styles in a static property. Other than that you could also try just using inline styles containerStyle={{paddingLeft: 10}}.

            – J. Hesters
            Nov 22 '18 at 14:44


















          2














          This is pretty easy actually. Considered you are using React Navigation V2 or V3, take a look at the createStackNavigator docs.



          There you have a headerLeft and a headerRight setting which can both take a custom component. So you can easily code up your example header.



          Edit



          So I coded up an example fastly:



          In your App.js:



          import React, { Component } from "react";
          import Navigator from "./navigation/navigation";

          export default class App extends Component {
          render() {
          return <Navigator />;
          }
          }


          navigation.js:



          import { createStackNavigator } from "react-navigation";
          import HomeScreen from "../screens/HomeScreen";

          const RootStack = createStackNavigator({ HomeScreen });

          export default RootStack;


          Now you can design your header on a screen by screen basis like this:



          import React, { Component } from "react";
          import { Platform, StyleSheet, Text, View } from "react-native";
          import { SafeAreaView } from "react-navigation";
          import { Icon } from "react-native-elements";

          const styles = StyleSheet.create({
          container: {
          flex: 1
          },
          icon: {
          paddingLeft: 10
          },
          iconContainer: {
          flexDirection: "row",
          justifyContent: "space-evenly",
          width: 120
          }
          });

          export class HomeScreen extends Component {
          static navigationOptions = {
          title: "Title",
          headerLeft: (
          <Icon
          containerStyle={styles.icon}
          type="ionicon"
          name={Platform.OS === "ios" ? "ios-menu" : "md-menu"}
          />
          ),
          headerRight: (
          <View style={styles.iconContainer}>
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-search" : "md-search"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-heart" : "md-heart"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-more" : "md-more"} />
          </View>
          )
          };

          render() {
          return (
          <SafeAreaView styles={styles.container}>
          <Text>Hi from the HomeScreen.</Text>
          </SafeAreaView>
          );
          }
          }

          export default HomeScreen;


          I used the <Icon /> component from react-native-elements. You can make these icons clickable by giving them an onPress prop.



          Here is a screenshot of the result on iOS:



          enter image description here



          Shameless plug:
          If you want to know more about React Navigation you might like my tutorial in which I guide you through building an application with production ready navigation settings.






          share|improve this answer


























          • I am aware of these, but I do not know where to put it, see my modifications within CustomHeader.js

            – B--rian
            Nov 21 '18 at 13:42











          • @B--rian I'm coding up an example as we speak, give me like fifteen more minutes 😊

            – J. Hesters
            Nov 21 '18 at 13:43











          • Hi, I am still curious how to out-source the navigationOptions into my CustomHeader.js.

            – B--rian
            Nov 21 '18 at 15:49






          • 1





            @B--rian I think other people tried to answer that. Right now, I don't have the time to code up an example for that, too, since it would take way longer than just using navigationOptions. To be honest, I haven't seen a single use case where a <CustomHeader /> would be needed 🤔 What is you goal with the <CustomHeader />? The React Navigation API probably already exposes a nice solution and maybe I can help you find it.

            – J. Hesters
            Nov 21 '18 at 16:09








          • 1





            @B--rian Could you edit your question and post the code that you used while trying out my code? If not, could you answer whether the other styles work (container and iconContainer)? Do note that due to hoisting the styles need to be defined in a seperate styles.js file, or above the class, since we are accessing the styles in a static property. Other than that you could also try just using inline styles containerStyle={{paddingLeft: 10}}.

            – J. Hesters
            Nov 22 '18 at 14:44
















          2












          2








          2







          This is pretty easy actually. Considered you are using React Navigation V2 or V3, take a look at the createStackNavigator docs.



          There you have a headerLeft and a headerRight setting which can both take a custom component. So you can easily code up your example header.



          Edit



          So I coded up an example fastly:



          In your App.js:



          import React, { Component } from "react";
          import Navigator from "./navigation/navigation";

          export default class App extends Component {
          render() {
          return <Navigator />;
          }
          }


          navigation.js:



          import { createStackNavigator } from "react-navigation";
          import HomeScreen from "../screens/HomeScreen";

          const RootStack = createStackNavigator({ HomeScreen });

          export default RootStack;


          Now you can design your header on a screen by screen basis like this:



          import React, { Component } from "react";
          import { Platform, StyleSheet, Text, View } from "react-native";
          import { SafeAreaView } from "react-navigation";
          import { Icon } from "react-native-elements";

          const styles = StyleSheet.create({
          container: {
          flex: 1
          },
          icon: {
          paddingLeft: 10
          },
          iconContainer: {
          flexDirection: "row",
          justifyContent: "space-evenly",
          width: 120
          }
          });

          export class HomeScreen extends Component {
          static navigationOptions = {
          title: "Title",
          headerLeft: (
          <Icon
          containerStyle={styles.icon}
          type="ionicon"
          name={Platform.OS === "ios" ? "ios-menu" : "md-menu"}
          />
          ),
          headerRight: (
          <View style={styles.iconContainer}>
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-search" : "md-search"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-heart" : "md-heart"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-more" : "md-more"} />
          </View>
          )
          };

          render() {
          return (
          <SafeAreaView styles={styles.container}>
          <Text>Hi from the HomeScreen.</Text>
          </SafeAreaView>
          );
          }
          }

          export default HomeScreen;


          I used the <Icon /> component from react-native-elements. You can make these icons clickable by giving them an onPress prop.



          Here is a screenshot of the result on iOS:



          enter image description here



          Shameless plug:
          If you want to know more about React Navigation you might like my tutorial in which I guide you through building an application with production ready navigation settings.






          share|improve this answer















          This is pretty easy actually. Considered you are using React Navigation V2 or V3, take a look at the createStackNavigator docs.



          There you have a headerLeft and a headerRight setting which can both take a custom component. So you can easily code up your example header.



          Edit



          So I coded up an example fastly:



          In your App.js:



          import React, { Component } from "react";
          import Navigator from "./navigation/navigation";

          export default class App extends Component {
          render() {
          return <Navigator />;
          }
          }


          navigation.js:



          import { createStackNavigator } from "react-navigation";
          import HomeScreen from "../screens/HomeScreen";

          const RootStack = createStackNavigator({ HomeScreen });

          export default RootStack;


          Now you can design your header on a screen by screen basis like this:



          import React, { Component } from "react";
          import { Platform, StyleSheet, Text, View } from "react-native";
          import { SafeAreaView } from "react-navigation";
          import { Icon } from "react-native-elements";

          const styles = StyleSheet.create({
          container: {
          flex: 1
          },
          icon: {
          paddingLeft: 10
          },
          iconContainer: {
          flexDirection: "row",
          justifyContent: "space-evenly",
          width: 120
          }
          });

          export class HomeScreen extends Component {
          static navigationOptions = {
          title: "Title",
          headerLeft: (
          <Icon
          containerStyle={styles.icon}
          type="ionicon"
          name={Platform.OS === "ios" ? "ios-menu" : "md-menu"}
          />
          ),
          headerRight: (
          <View style={styles.iconContainer}>
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-search" : "md-search"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-heart" : "md-heart"} />
          <Icon type="ionicon" name={Platform.OS === "ios" ? "ios-more" : "md-more"} />
          </View>
          )
          };

          render() {
          return (
          <SafeAreaView styles={styles.container}>
          <Text>Hi from the HomeScreen.</Text>
          </SafeAreaView>
          );
          }
          }

          export default HomeScreen;


          I used the <Icon /> component from react-native-elements. You can make these icons clickable by giving them an onPress prop.



          Here is a screenshot of the result on iOS:



          enter image description here



          Shameless plug:
          If you want to know more about React Navigation you might like my tutorial in which I guide you through building an application with production ready navigation settings.







          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Dec 16 '18 at 10:48









          halfer

          14.7k758115




          14.7k758115










          answered Nov 21 '18 at 13:31









          J. HestersJ. Hesters

          8191436




          8191436













          • I am aware of these, but I do not know where to put it, see my modifications within CustomHeader.js

            – B--rian
            Nov 21 '18 at 13:42











          • @B--rian I'm coding up an example as we speak, give me like fifteen more minutes 😊

            – J. Hesters
            Nov 21 '18 at 13:43











          • Hi, I am still curious how to out-source the navigationOptions into my CustomHeader.js.

            – B--rian
            Nov 21 '18 at 15:49






          • 1





            @B--rian I think other people tried to answer that. Right now, I don't have the time to code up an example for that, too, since it would take way longer than just using navigationOptions. To be honest, I haven't seen a single use case where a <CustomHeader /> would be needed 🤔 What is you goal with the <CustomHeader />? The React Navigation API probably already exposes a nice solution and maybe I can help you find it.

            – J. Hesters
            Nov 21 '18 at 16:09








          • 1





            @B--rian Could you edit your question and post the code that you used while trying out my code? If not, could you answer whether the other styles work (container and iconContainer)? Do note that due to hoisting the styles need to be defined in a seperate styles.js file, or above the class, since we are accessing the styles in a static property. Other than that you could also try just using inline styles containerStyle={{paddingLeft: 10}}.

            – J. Hesters
            Nov 22 '18 at 14:44





















          • I am aware of these, but I do not know where to put it, see my modifications within CustomHeader.js

            – B--rian
            Nov 21 '18 at 13:42











          • @B--rian I'm coding up an example as we speak, give me like fifteen more minutes 😊

            – J. Hesters
            Nov 21 '18 at 13:43











          • Hi, I am still curious how to out-source the navigationOptions into my CustomHeader.js.

            – B--rian
            Nov 21 '18 at 15:49






          • 1





            @B--rian I think other people tried to answer that. Right now, I don't have the time to code up an example for that, too, since it would take way longer than just using navigationOptions. To be honest, I haven't seen a single use case where a <CustomHeader /> would be needed 🤔 What is you goal with the <CustomHeader />? The React Navigation API probably already exposes a nice solution and maybe I can help you find it.

            – J. Hesters
            Nov 21 '18 at 16:09








          • 1





            @B--rian Could you edit your question and post the code that you used while trying out my code? If not, could you answer whether the other styles work (container and iconContainer)? Do note that due to hoisting the styles need to be defined in a seperate styles.js file, or above the class, since we are accessing the styles in a static property. Other than that you could also try just using inline styles containerStyle={{paddingLeft: 10}}.

            – J. Hesters
            Nov 22 '18 at 14:44



















          I am aware of these, but I do not know where to put it, see my modifications within CustomHeader.js

          – B--rian
          Nov 21 '18 at 13:42





          I am aware of these, but I do not know where to put it, see my modifications within CustomHeader.js

          – B--rian
          Nov 21 '18 at 13:42













          @B--rian I'm coding up an example as we speak, give me like fifteen more minutes 😊

          – J. Hesters
          Nov 21 '18 at 13:43





          @B--rian I'm coding up an example as we speak, give me like fifteen more minutes 😊

          – J. Hesters
          Nov 21 '18 at 13:43













          Hi, I am still curious how to out-source the navigationOptions into my CustomHeader.js.

          – B--rian
          Nov 21 '18 at 15:49





          Hi, I am still curious how to out-source the navigationOptions into my CustomHeader.js.

          – B--rian
          Nov 21 '18 at 15:49




          1




          1





          @B--rian I think other people tried to answer that. Right now, I don't have the time to code up an example for that, too, since it would take way longer than just using navigationOptions. To be honest, I haven't seen a single use case where a <CustomHeader /> would be needed 🤔 What is you goal with the <CustomHeader />? The React Navigation API probably already exposes a nice solution and maybe I can help you find it.

          – J. Hesters
          Nov 21 '18 at 16:09







          @B--rian I think other people tried to answer that. Right now, I don't have the time to code up an example for that, too, since it would take way longer than just using navigationOptions. To be honest, I haven't seen a single use case where a <CustomHeader /> would be needed 🤔 What is you goal with the <CustomHeader />? The React Navigation API probably already exposes a nice solution and maybe I can help you find it.

          – J. Hesters
          Nov 21 '18 at 16:09






          1




          1





          @B--rian Could you edit your question and post the code that you used while trying out my code? If not, could you answer whether the other styles work (container and iconContainer)? Do note that due to hoisting the styles need to be defined in a seperate styles.js file, or above the class, since we are accessing the styles in a static property. Other than that you could also try just using inline styles containerStyle={{paddingLeft: 10}}.

          – J. Hesters
          Nov 22 '18 at 14:44







          @B--rian Could you edit your question and post the code that you used while trying out my code? If not, could you answer whether the other styles work (container and iconContainer)? Do note that due to hoisting the styles need to be defined in a seperate styles.js file, or above the class, since we are accessing the styles in a static property. Other than that you could also try just using inline styles containerStyle={{paddingLeft: 10}}.

          – J. Hesters
          Nov 22 '18 at 14:44















          1














          You can use something like the below mentioned code in your class.



          static navigationOptions = {
          headerTitle: 'Home Page',
          headerRight: (
          <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.logoutClick() }}>
          <Text style={navItemTxt}> Logout</Text>
          </TouchableOpacity >
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.clearCartClick() }}>
          <Image source={require('../images/search/ic_clear_cart.png')}
          style={navItemImg} />
          </TouchableOpacity >
          <ConnectedBadgeTitle navigation={navigation} badgeAction={() => { navigation.navigate('Cart'); }} />
          </View >
          ),
          };





          share|improve this answer
























          • Thanks for the concise example. Where exactly should I put these navigationOptions? Ideally, I would like to have the whole configuration of "headerRight" within CustomHeader.js

            – B--rian
            Nov 21 '18 at 14:08











          • Put it in your HomeScreen class.

            – Manju Basha
            Nov 21 '18 at 14:16













          • I actually had to put it into MainTabNavigation.js into the createStackNavigator.

            – B--rian
            Nov 22 '18 at 13:34
















          1














          You can use something like the below mentioned code in your class.



          static navigationOptions = {
          headerTitle: 'Home Page',
          headerRight: (
          <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.logoutClick() }}>
          <Text style={navItemTxt}> Logout</Text>
          </TouchableOpacity >
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.clearCartClick() }}>
          <Image source={require('../images/search/ic_clear_cart.png')}
          style={navItemImg} />
          </TouchableOpacity >
          <ConnectedBadgeTitle navigation={navigation} badgeAction={() => { navigation.navigate('Cart'); }} />
          </View >
          ),
          };





          share|improve this answer
























          • Thanks for the concise example. Where exactly should I put these navigationOptions? Ideally, I would like to have the whole configuration of "headerRight" within CustomHeader.js

            – B--rian
            Nov 21 '18 at 14:08











          • Put it in your HomeScreen class.

            – Manju Basha
            Nov 21 '18 at 14:16













          • I actually had to put it into MainTabNavigation.js into the createStackNavigator.

            – B--rian
            Nov 22 '18 at 13:34














          1












          1








          1







          You can use something like the below mentioned code in your class.



          static navigationOptions = {
          headerTitle: 'Home Page',
          headerRight: (
          <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.logoutClick() }}>
          <Text style={navItemTxt}> Logout</Text>
          </TouchableOpacity >
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.clearCartClick() }}>
          <Image source={require('../images/search/ic_clear_cart.png')}
          style={navItemImg} />
          </TouchableOpacity >
          <ConnectedBadgeTitle navigation={navigation} badgeAction={() => { navigation.navigate('Cart'); }} />
          </View >
          ),
          };





          share|improve this answer













          You can use something like the below mentioned code in your class.



          static navigationOptions = {
          headerTitle: 'Home Page',
          headerRight: (
          <View style={{ flexDirection: 'row' }}>
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.logoutClick() }}>
          <Text style={navItemTxt}> Logout</Text>
          </TouchableOpacity >
          <TouchableOpacity activeOpacity={0.7}
          onPress={() => { params.clearCartClick() }}>
          <Image source={require('../images/search/ic_clear_cart.png')}
          style={navItemImg} />
          </TouchableOpacity >
          <ConnectedBadgeTitle navigation={navigation} badgeAction={() => { navigation.navigate('Cart'); }} />
          </View >
          ),
          };






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 21 '18 at 13:58









          Manju BashaManju Basha

          312420




          312420













          • Thanks for the concise example. Where exactly should I put these navigationOptions? Ideally, I would like to have the whole configuration of "headerRight" within CustomHeader.js

            – B--rian
            Nov 21 '18 at 14:08











          • Put it in your HomeScreen class.

            – Manju Basha
            Nov 21 '18 at 14:16













          • I actually had to put it into MainTabNavigation.js into the createStackNavigator.

            – B--rian
            Nov 22 '18 at 13:34



















          • Thanks for the concise example. Where exactly should I put these navigationOptions? Ideally, I would like to have the whole configuration of "headerRight" within CustomHeader.js

            – B--rian
            Nov 21 '18 at 14:08











          • Put it in your HomeScreen class.

            – Manju Basha
            Nov 21 '18 at 14:16













          • I actually had to put it into MainTabNavigation.js into the createStackNavigator.

            – B--rian
            Nov 22 '18 at 13:34

















          Thanks for the concise example. Where exactly should I put these navigationOptions? Ideally, I would like to have the whole configuration of "headerRight" within CustomHeader.js

          – B--rian
          Nov 21 '18 at 14:08





          Thanks for the concise example. Where exactly should I put these navigationOptions? Ideally, I would like to have the whole configuration of "headerRight" within CustomHeader.js

          – B--rian
          Nov 21 '18 at 14:08













          Put it in your HomeScreen class.

          – Manju Basha
          Nov 21 '18 at 14:16







          Put it in your HomeScreen class.

          – Manju Basha
          Nov 21 '18 at 14:16















          I actually had to put it into MainTabNavigation.js into the createStackNavigator.

          – B--rian
          Nov 22 '18 at 13:34





          I actually had to put it into MainTabNavigation.js into the createStackNavigator.

          – B--rian
          Nov 22 '18 at 13:34











          0














          let consider if route.js like following



          import {
          StackNavigator,
          } from 'react-navigation';
          import Home from './home.js';
          import Login from './login.js';

          export default Navigator = StackNavigator({
          Home: { screen: Home },
          Login: { screen: Login },
          });


          Using native-base can create custom header view



          CustomHeader.js



          import { Header,Left, Right, Body, Thumbnail } from 'native-base';
          <Header style={{ backgroundColor: '#f8f8f8', alignItems: 'center', justifyContent: 'center' }}>
          <Left style={{ flexDirection: 'row' }}>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Left>
          <Body style={{}}>
          <Text style={{}}>Name</Text>
          </Body>
          <Right>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Right>
          </Header>


          home.js file like following



          for Drawer Drawer component



          static navigationOptions = {
          header: null,
          };


          under your drawer component can create custom header



          render(){
          return(
          <Drawer > //Assumed you have some drawer component
          <CustomHeader data={"title"}/>
          <ScrollView>
          </ScrollView>
          </Drawer>
          )
          }





          share|improve this answer
























          • Thanks for your lines. I am a bit confused since you are using a Drawer-component, I am not (yet) using. In my situation it is a StackNavigator within a TabNavigator, see modified question.

            – B--rian
            Nov 21 '18 at 13:46
















          0














          let consider if route.js like following



          import {
          StackNavigator,
          } from 'react-navigation';
          import Home from './home.js';
          import Login from './login.js';

          export default Navigator = StackNavigator({
          Home: { screen: Home },
          Login: { screen: Login },
          });


          Using native-base can create custom header view



          CustomHeader.js



          import { Header,Left, Right, Body, Thumbnail } from 'native-base';
          <Header style={{ backgroundColor: '#f8f8f8', alignItems: 'center', justifyContent: 'center' }}>
          <Left style={{ flexDirection: 'row' }}>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Left>
          <Body style={{}}>
          <Text style={{}}>Name</Text>
          </Body>
          <Right>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Right>
          </Header>


          home.js file like following



          for Drawer Drawer component



          static navigationOptions = {
          header: null,
          };


          under your drawer component can create custom header



          render(){
          return(
          <Drawer > //Assumed you have some drawer component
          <CustomHeader data={"title"}/>
          <ScrollView>
          </ScrollView>
          </Drawer>
          )
          }





          share|improve this answer
























          • Thanks for your lines. I am a bit confused since you are using a Drawer-component, I am not (yet) using. In my situation it is a StackNavigator within a TabNavigator, see modified question.

            – B--rian
            Nov 21 '18 at 13:46














          0












          0








          0







          let consider if route.js like following



          import {
          StackNavigator,
          } from 'react-navigation';
          import Home from './home.js';
          import Login from './login.js';

          export default Navigator = StackNavigator({
          Home: { screen: Home },
          Login: { screen: Login },
          });


          Using native-base can create custom header view



          CustomHeader.js



          import { Header,Left, Right, Body, Thumbnail } from 'native-base';
          <Header style={{ backgroundColor: '#f8f8f8', alignItems: 'center', justifyContent: 'center' }}>
          <Left style={{ flexDirection: 'row' }}>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Left>
          <Body style={{}}>
          <Text style={{}}>Name</Text>
          </Body>
          <Right>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Right>
          </Header>


          home.js file like following



          for Drawer Drawer component



          static navigationOptions = {
          header: null,
          };


          under your drawer component can create custom header



          render(){
          return(
          <Drawer > //Assumed you have some drawer component
          <CustomHeader data={"title"}/>
          <ScrollView>
          </ScrollView>
          </Drawer>
          )
          }





          share|improve this answer













          let consider if route.js like following



          import {
          StackNavigator,
          } from 'react-navigation';
          import Home from './home.js';
          import Login from './login.js';

          export default Navigator = StackNavigator({
          Home: { screen: Home },
          Login: { screen: Login },
          });


          Using native-base can create custom header view



          CustomHeader.js



          import { Header,Left, Right, Body, Thumbnail } from 'native-base';
          <Header style={{ backgroundColor: '#f8f8f8', alignItems: 'center', justifyContent: 'center' }}>
          <Left style={{ flexDirection: 'row' }}>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Left>
          <Body style={{}}>
          <Text style={{}}>Name</Text>
          </Body>
          <Right>
          <Icon name='ios-menu-outline' color='#000' size={26} style={{ paddingLeft: 15, width: 40 }} onPress={} />
          </Right>
          </Header>


          home.js file like following



          for Drawer Drawer component



          static navigationOptions = {
          header: null,
          };


          under your drawer component can create custom header



          render(){
          return(
          <Drawer > //Assumed you have some drawer component
          <CustomHeader data={"title"}/>
          <ScrollView>
          </ScrollView>
          </Drawer>
          )
          }






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 21 '18 at 13:42









          AshaAsha

          2061316




          2061316













          • Thanks for your lines. I am a bit confused since you are using a Drawer-component, I am not (yet) using. In my situation it is a StackNavigator within a TabNavigator, see modified question.

            – B--rian
            Nov 21 '18 at 13:46



















          • Thanks for your lines. I am a bit confused since you are using a Drawer-component, I am not (yet) using. In my situation it is a StackNavigator within a TabNavigator, see modified question.

            – B--rian
            Nov 21 '18 at 13:46

















          Thanks for your lines. I am a bit confused since you are using a Drawer-component, I am not (yet) using. In my situation it is a StackNavigator within a TabNavigator, see modified question.

          – B--rian
          Nov 21 '18 at 13:46





          Thanks for your lines. I am a bit confused since you are using a Drawer-component, I am not (yet) using. In my situation it is a StackNavigator within a TabNavigator, see modified question.

          – B--rian
          Nov 21 '18 at 13:46


















          draft saved

          draft discarded




















































          Thanks for contributing an answer to Stack Overflow!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid



          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.


          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function () {
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412278%2fhow-to-implement-custom-header-icons-within-a-nested-stacknavigator%23new-answer', 'question_page');
          }
          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          這個網誌中的熱門文章

          Xamarin.form Move up view when keyboard appear

          Post-Redirect-Get with Spring WebFlux and Thymeleaf

          Anylogic : not able to use stopDelay()