How do I get a different header for each tab in React Native?

Question

I'm working on an eBook/AudioBook app. I currently have three screens that are inside a BottomTabNavigator, with that navigator being nested within a stack navigator so I can show a header:

import { createAppContainer } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { Entypo, MaterialIcons } from "@expo/vector-icons";
import Header from "./src/components/Header";

import HomeScreen from "./src/screens/HomeScreen";
import ListenScreen from "./src/screens/ListenScreen";
import AccountScreen from "./src/screens/AccountScreen";

export const navigator = createStackNavigator(
  {
    mainFlow: createBottomTabNavigator(
      {
        Home: HomeScreen,
        Listen: ListenScreen,
        Account: AccountScreen,
      },
    ),
  },
  {
    defaultNavigationOptions: {
      headerTitle: () => <Header />,
      headerTitleAlign: "center",
    },
  }
);


HomeScreen.navigationOptions = {
  tabBarIcon: <Entypo name="home" size={30} />,
};

ListenScreen.navigationOptions = {
  tabBarIcon: <Entypo name="music" size={30} />,
};

AccountScreen.navigationOptions = {
  tabBarIcon: <MaterialIcons name="account-circle" size={30} />,
};

const App = createAppContainer(navigator);

export default () => {
  return <App />;
};

I created a custom header, but it doesn't change as go tab-to-tab. Is there a way to fix that?

I have the same issue in one of my apps, take a state variable, and pass it when your screen is going to navigate from HOME to Listen. In Listen screen, you have to set your variable accordingly like active Ebook, and when you move back again pass this parameter to the Home screen and set your active Ebook variable. If you don't understand, please share your Home and Listen screen code, i will try to fix it. Thanks — Asad, Apr 30 '20 at 04:40

score 1 · Answer 1 · answered Apr 26 '21 at 20:38

In react-navigation v5, I have same problem, I wanted to have different header for each tab screen, so I solved my problem with defining each tab as a stack, then this inner stack could have self header.

const Tab = createBottomTabNavigator();

const HomeStack = createStackNavigator();
const SettingsStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen
        name="A"
        component={A}
        options={{ tabBarLabel: 'Home!' }}
      />
    </HomeStack.Navigator>
  );
}

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen
        name="B"
        component={B}
        options={{ tabBarLabel: 'Settings!' }}
      />
    </SettingsStack.Navigator>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

As above code, each tab.screen has inner stack as component, that has self header. Screen options with nested navigators

How do I get a different header for each tab in React Native?

1 Answers1