Missing header bar on a simple combination react-navigation

Question

I wanted to try the MaterialBottomTabNavigator option in react-navigation. Unfortunately, it seems that the top bar is never displayed, although it should be according to the documentation.

import React from "React";

import { Text, View } from "react-native";
import { createAppContainer } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

export default createAppContainer(createMaterialBottomTabNavigator(
  {
    S1: {
      screen: HomeScreen,
    },
    S2: {
      screen: HomeScreen,
    },
  }
),
);

Is there something obvious I've been missing?

score 4 · Accepted Answer · answered Aug 31 '19 at 15:56

"createMaterialBottomTabNavigator" does not have header bar by default but "createStackNavigator" has header bar

You can try this code

import React from "React";

import { Text, View } from "react-native";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}

const Tab1 = createStackNavigator({
  S1: {
    screen: HomeScreen
  }
});

const Tab2 = createStackNavigator({
  S2: {
    screen: HomeScreen
  }
});

export default createAppContainer(
  createMaterialBottomTabNavigator({
    Tab1,
    Tab2
  })
);

App Preview

One of those rare occurrences when SO is helpful these days. Thanks. — ror, Dec 05 '19 at 05:15

Missing header bar on a simple combination react-navigation

1 Answers1