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?

Answer 1

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"
 }
);