React Navigation and configure the header for null and Customized Header

Question

After setup a simple stack navigation. i've tried to customize the Header with a customized header from naviveBase, but after add the new header the old header still appearing on the background of the new one. so, please, someone can clarify if is possible to use a customized header and remove the react-navigation header?

export const HomeStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      headerStyle,

      header: <SearchBar />
    }
  }
})

I've tried to use null as they said but the new header did not showed

export const HomeStack = createStackNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      headerStyle,

     header: null && <SearchBar />
    }
  }
})

header: should work, can you share more details like a snack reproducing it — Subramanya Chakravarthy, Dec 21 '18 at 06:34

Love Behl · Accepted Answer · 2018-12-25T04:20:47.377

Put this HeaderCommon.js file on common folder:

HeaderCommon.js 

import React from 'react';
import {  View,TouchableOpacity,StyleSheet, Image} from 'react-native';
import { Header,  Button, Left, Right, Body } from 'native-base';
import PropTypes from 'prop-types';
import Icon from "react-native-vector-icons/MaterialIcons";

export default function HeaderCommon({
    onPressLeft,
    onPressRight,
    Headerstyle= styles.header,
    label="",
    textProp=styles.text,
    iconLeft="",
    iconRight="",
    images=require('../assets/emiselogo.png'),
    ImageStyle=styles.ImageStyle,
}) {
    return (

       <View style={Headerstyle}>
          <Left>
            <TouchableOpacity transparent onPress={onPressLeft} style={{marginHorizontal:20}}>
              <Icon  style={{color:'white',fontSize:30}} name={iconLeft} />
            </TouchableOpacity>
          </Left>
          <Body>
            {/* <Title style={textProp}>{label}</Title> */}
            <Image source={images} style={ImageStyle} />
          </Body>
          <Right>
          <Button transparent onPress={onPressRight} style={{marginLeft:5}}>
              <Icon  style={{color:'white'}} name={iconRight} />
            </Button>
          </Right>
      </View>


    );
  }

  Header.propTypes = {
    onPressLeft: PropTypes.func,
    onPressRight: PropTypes.func,
    label: PropTypes.string,
    Headerstyle: PropTypes.any,
    textProp: PropTypes.any,
    iconLeft:PropTypes.any,
    iconRight:PropTypes.any,
    disabled:PropTypes.any,
    image:PropTypes.any,
    ImageStyle:PropTypes.any
  };

  const styles = StyleSheet.create({
    header: {
        height:70,
        backgroundColor:'#6d6d6d',
        flexDirection:"row",
    },
    text: {
        color:'white',
        fontSize:16
    },
    ImageStyle: {
      height:50,
      width:50
    }
  });

Now import it where you want to use it for example

Another component and import Header here

/** @Profile setting */

import React, { Component } from "react";
import {
  View,
  StyleSheet,
  TouchableOpacity,
  Image,
  TextInput,
  AsyncStorage,
  Alert,
  BackHandler,
  SafeAreaView,
  Linking
} from "react-native";

import {
  Container,
  Text,
  FooterTab,
  Button,
  Content,
  Title,
  Header,
  Footer,
  Card,
  CardItem,
  Body,
  List,
  ListItem,
  Left,
  Right
} from "native-base";

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

import { Actions } from 'react-native-router-flux';

import { Avatar } from 'react-native-elements';

import ActivityLoader from "../common/Activityloader";

import HeaderCommon from '../common/Header';

export default class ProfileSettings extends Component {
  constructor(props) {
    super(props);
    this.state = {
      id: '',
      pic: '',
      name: '',
      email: '',
      token: '',
      loading: false,
      imageData: '',
      avatar: '',
      avatar_string: '',
    }
  }


  render() {



    return (
      <Container>
        <HeaderCommon onPressLeft={Actions.pop}
                      iconLeft="arrow-back"
                      images={require('../assets/emiselogo.png')}
                      ImageStyle={{height:70,width:70}}/>

        <Content style={styles.ContentBodyView}>

        </Content>

      </Container>
    );
  }
}

const styles = StyleSheet.create({


  ContentBodyView:{
    backgroundColor:"#f3f3f3",
    flex:1
  },
  ListContainerView:{
    height:50,
    flex:1,
    flexDirection:'row', 
    backgroundColor:'white',
    justifyContent:'space-between',
    alignItems:'center'
  }
});

you can use `Text` under the header in the body if you want Text on a centre of the header instead if `Image` component. — Love Behl, Dec 21 '18 at 06:29

React Navigation and configure the header for null and Customized Header

1 Answers1