CODEWITHSUNDEEP
react-nativereact-navigation
Alexandre Rivest
Alexandre Rivest

Reputation: 694

React-navigation How to put StackNavigator in TabRouter screen

I'm having some issue with react-navigation. I want to have a custom Tab Bar in which one of the screen is made of a StackNavigator.

So Basically, I have

Tab
  -- StackNavigator
     -- Dashboard (main)
     -- Wallet
     -- Etc...
  -- Other tabs...

To make my custom tab, I used TabRouter, createNavigationContainer and createNavigator

const Tabs = TabRouter(
  {
    Main: {
      screen: Main,
    },
  },
  {
    initialRouteName: 'Main',
    tabBarComponent: TabView.TabBarBottom,
    swipeEnabled: false,
    animationEnabled: false,
    backBehavior: 'none',
  },
);

const CustomTabView = ({ router, navigation }) => {
  const { routes, index } = navigation.state;
  const ActiveScreen = router.getComponentForState(navigation.state);
  return (
    <View style={{ flex: 1 }}>
      <ActiveScreen
        navigation={addNavigationHelpers({
          ...navigation,
          state: routes[index],
        })}
      />
      <View style={styles.tabContainer}>
        {routes.map(route => (
          <TouchableOpacity                          // custom tab items
            key={route.routeName}
            onPress={() => navigation.navigate(route.routeName)}
          >
            <TabItem />

          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};

const TabBar = createNavigationContainer(createNavigator(Tabs)(CustomTabView));

Where Main is:

const Main = StackNavigator({
  Dashboard: Dashboard,
  Wallet: Wallet,
  ...
}, { initialRouteName: 'Dashboard' });

But it doesn't because Dashboard must declares a screen.

What I'm doing wrong? I don't know. How can we put a StackNavigator in a TabBar screen?

Upvotes: 0

Views: 1106

Answers (1)

Andreyco
Andreyco

Reputation: 22872

Fortunately, it's very easy.

What StackNavigator (or any other navigator) returns is React component. That means you can use it as screen component for any other route.

Thus, one of your routes screen will be StackNavigator.

Sample code

const Tabs = TabNavigator(
  {
    Main: {
      screen: StackNavigator({
        Dashboard: {
          screen: Dashboard,
        }
        Wallet: {
          screen: Wallet,
        }
      }),
    },
  },
  {
    initialRouteName: 'Main',
    tabBarComponent: TabView.TabBarBottom,
    swipeEnabled: false,
    animationEnabled: false,
    backBehavior: 'none',
  },
);

Upvotes: 1

Related Questions