React-native with react-navigation: header not showing in screen

Question

I do have a simple React-native app, using react-navigation for navigation. My issue is that for one of the screens the header and title is not showing, even though it is set in navigationOptions:

main.js:

import React from "react";
import { View, Text } from "react-native";
import {
  createDrawerNavigator,
  createAppContainer,
  createStackNavigator
} from "react-navigation";

import ArticleList from "./screens/ArticleList";
import ArticleList2 from "./screens/ArticeList2";

import ArticleWebView from "./screens/ArticleWebView";

// create the Navigator to be used
const Stack = createStackNavigator({
  ArticleList: { screen: ArticleList },
  ArticleWebView: { screen: ArticleWebView }
});

const Drawer = createDrawerNavigator(
  {
    Stack: { screen: Stack },
    ArticleList2: { screen: ArticleList2 }
  },
  {
    initialRouteName: "Stack"
  }
);

// The container for the navigator
const AppContainer = createAppContainer(Drawer);

class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

export default App;

The ArticleList2 is a very simple component:

import React from "react";
import { View, Text } from "react-native";

import ArticleListComponent from "../components/ArticleListComponent";

class ArticleList2 extends React.Component {
  static navigationOptions = {
  title: 'Link2'
  };

  render() {
    return (
      <View>
        <Text>LIst2</Text>
      </View>
    );
  }
}

export default ArticleList2;

However, the title and header are not rendered in the app. Could anybody help please?

Zayco · Accepted Answer · 2019-01-27 00:24:07Z

7

DrawerNavigator does not include a header. In order to create a header inside of ArticleList2 you will have to create a new StackNavigator for the component.

You have to think about and plan out the navigation flow of your app.

The Drawer section of the React Navigation documentation is a little lacking, but you can use the same principle as described in the Tab section

A stack navigator for each tab

const ArticleList2Stack = createStackNavigator({
  ArticleList2: { screen: ArticleList2 }
});

const Drawer = createDrawerNavigator(
 {
   Stack: { screen: Stack },
   ArticleList2: { screen: ArticleList2Stack }
 },
 {
   initialRouteName: "Stack"
 }
);

edited Jan 27, 2019 at 0:24

answered Jan 26, 2019 at 23:52

Zayco

3274 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Cactus Over a year ago

Thanks, this works. For further reference: github.com/react-navigation/react-navigation/issues/1632

Amit Bravo Over a year ago

would it effect performance like that ? I was reading somewhere in react navigation docs that nesting effects performance. I need to use 4-5 drawer screens so wrapping every drawer screen into stack navigator like this, how wise it is ? would it effect performance significantly ? I am trying react navigation 5.x

Zayco Over a year ago

@AmitBravo Depending on what you are trying to achieve it's sometimes necessary to nest navigations to solve UI/UX challenges. The doc is mentioning performance concerns when deeply nesting navigations which I would imagine goes beyond a couple levels. Also as the doc mentions, "Think of nesting navigators as a way to achieve the UI you want rather than a way to organize your code. If you want to create separate group of screens for organization, keep them in separate objects/arrays rather than separate navigators." So depending on your needs there might be multiple ways of solving them.

Collectives™ on Stack Overflow

React-native with react-navigation: header not showing in screen

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related