Cfrgtkky

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).

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.

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:

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.

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 >

    ),

  };

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>

  )

}