Btukfyl

I'm trying to add a constant Header bar to my screen (all screens, similar to this example) with basic functionality (menu button, and a back button), but I'm having trouble finding a way to do this when using createBottomTabNavigator. I haven't seen anything saying this isn't possible, so if I'm making a design mistake, do let me know.

Here is my minimal foobar example (it runs):

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

import { createBottomTabNavigator } from 'react-navigation';

import Ionicons from 'react-native-vector-icons/Ionicons';





class ScreenA extends React.Component {

    constructor(props) {

      super(props);

      this.state = {

        screenName: 'Screen A'

      }

    }



    render() {

      return (

        <View 

          style={styles.container}

        >

          <Text>{this.state.screenName}</Text>

        </View>

      );

    }

};



class ScreenB extends React.Component {

    constructor(props) {

      super(props);

      this.state = {

        screenName: 'Screen B'

      }

    }



    render() {

      return (

        <View 

          style={styles.container}

        >

          <Text>{this.state.screenName}</Text>

        </View>

      );

    }

};





const BottomTabNav = createBottomTabNavigator(

  {

    ScreenA: {

      screen: ScreenA,

      navigationOptions: {

        title: '',

        tabBarIcon: ({ focused, tintColor }) => {

          return <Ionicons

                    name={ focused ? 'ios-card' : 'ios-card-outline' }

                    size={30}

                    style={{ marginTop: 6 }}

                 />;

        },

      }

    },

    ScreenB: {

      screen: ScreenB, 

      navigationOptions: {

        title: '',

        tabBarIcon: ({ focused, tintColor }) => {

          return <Ionicons

                    name={ focused ? 'ios-chatbubbles' : 'ios-chatbubbles-outline' }

                    size={30}

                    style={{ marginTop: 6 }}

                 />;

        },

      },

    }

  },

  {

    initialRouteName: 'ScreenA',

  }

);





export default class App extends React.Component {

  render() {

    return (

      <BottomTabNav />

    );

  }

};





const styles = StyleSheet.create({

    container: {

        flex: 1,

        backgroundColor: '#fff',

        alignItems: 'center',

        justifyContent: 'center',

    },

});

Apologies for not including a Snack link, but I'm having issues with dependencies when trying to build the demo.

Unfortunately, the default createBottomTabNavigator has no props for specifying header for each tab screen because making separate tab screen header is not an ideal use-case. Instead ideally all the tabs share a common header so in react native that can be done by wrapping the tab navigator inside a stack.

If you need different headers for each of your tabs, then consider making a generic header component that suits you app needs and attach it on the render inside your main container as first child and keep another child with flex:1 . Please have a look to the code below

//Header.js



import React from 'react';

import ReactNative, { StyleSheet } from 'react-native';

import Icon from 'react-native-vector-icons/MaterialIcons';



import * as CONST from '../../util/constants';



export default ({title, hasBackButton, goBack}) => {

   return (

    <ReactNative.View style={styles.headerContainer}>

        {hasBackButton && <ReactNative.TouchableOpacity onPress={goBack} style={styles.goBackButton}>

            <Icon name='arrow-back' size={28} color={CONST.WHITE_COLOR} /> 

        </ReactNative.TouchableOpacity>}

        <ReactNative.View style={styles.textView}>

            <ReactNative.Text style={styles.titleText}>{title}</ReactNative.Text>

        </ReactNative.View>

        {hasBackButton && <ReactNative.View style={styles.goBackButton}/>}

    </ReactNative.View>

  );

};



const styles = StyleSheet.create({

  headerContainer: {

    flexDirection: 'row',

    height: 54,

    backgroundColor: CONST.SECONDARY_COLOR,

    paddingHorizontal: 16

  },

  goBackButton: {

    paddingLeft: 0,

    paddingRight: 5,

    width: 40,

    paddingVertical: 5,

    justifyContent: 'center',

  },

  textView: {

    flex:1,

    paddingVertical: 5,

    justifyContent: 'center',

  },

  titleText: {

    fontSize: 22,

    color: CONST.WHITE_COLOR,

    fontWeight: '400',

  },

});

In the component (Tab Screen component), you can use it like below:

render() {

    return (

        <ReactNative.View style={styles.container}>

            <Header title='Tab1' />

            <ReactNative.View style={{flex:1}}>

            .... your design goes here..

            </ReactNative.View>

        </ReactNative.View>

    );

}

Hope this helps.