CODEWITHSUNDEEP
react-nativemobileexpostack-navigatorreact-navigation-bottom-tab
Fibo36
Fibo36

Reputation: 84

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

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 />;
};

Screenshot

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

Upvotes: 0

Views: 957

Answers (1)

Mahmonir Bakhtiyari
Mahmonir Bakhtiyari

Reputation: 605

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

Upvotes: 1

Related Questions