Closed maartenvandillen closed 6 years ago
@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
})
@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.
@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. :)
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!
By doing this solved my problem draw.navigationOptions = { header: null }
I am still facing this issue. None of the solution worked for me.
@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
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!