Hide white header with back button on top of SideBar?

[maartenvandillen]

Hi,

I'm trying to incorporate your example in my own app. Everything works fine, but after opening the side bar menu I see a white header with an arrow back button at the top of the screen, above the side bar. Where is this coming from and how can I remove it? I'd like to keep seeing my own custom header of the screen underneath the drawer.

PS: Images at the top of the SideBar are missing because I disabled them

Thanks!

[Jasbir23]

@maartenvandillen In react navigation sometimes predefined headers are appended. You could remove these headers by moving over to the parent router component and passing the prop header: null, inside the router definition. You could also remove these headers from individual components like this.

static navigationOptions = ({ navigation }) => ({
header: null
})

[maartenvandillen]

@Jasbir23 Thanks for your reply. I've tried your suggestion on all navigators and the SideBar itself but the only thing that removes the header is putting headerMode: 'none' on the main stack navigator. A consequence of that is that all screens lose their header and I'll have to put a header component in the render method of each. If that solves this issue I think I can live with that. If you have any other suggestion please let me know.

[Jasbir23]

@maartenvandillen You could try changing the version of react navigation from your package.json and rebuild. I did not have this issue with my app as you can see in the GIF, the header does not show up in the sidebar. Other than that I believe writing your own headers is also doable. If they are too similar you could always make a component and re-use it. Not sure if this solves your problem. :)

[maartenvandillen]

it's working now. I had to use the right combination of header values of false, none and float in all navigators involved. Thanks for your time!

[rassemdev]

By doing this solved my problem draw.navigationOptions = { header: null }

[gupta-ji6]

I am still facing this issue. None of the solution worked for me.

[rassemdev]

@gupta-ji6 here is my index.js folder:

import React, { Component } from "react";
import HomeScreen from "./HomeScreen.js";
import ChatScreen from "../ChatScreen/index.js";
import ProfileScreen from "../ProfileScreen/index.js";
import SideBar from "../SideBar/SideBar.js";
import { DrawerNavigator } from "react-navigation";

const HomeScreenRouter = DrawerNavigator(
  {
    Home: {
        screen: HomeScreen
    },
    Chat: {
        screen: ChatScreen
    },
    ProfileScreen: {
        screen: ProfileScreen
    }
  },
  {
    contentComponent: props => <SideBar {...props} />
  }
);

HomeScreenRouter.navigationOptions = {
  header: null
}
export default HomeScreenRouter;

that solved my problem

[RuthenicEye]

@rassemdev ^^ this worked for me.. I just set the navigationOptions for my drawer stack.

Drawer.navigationOptions = { header: null }