CODEWITHSUNDEEP
javascriptreact-native
Shury
Shury

Reputation: 578

React Native createStackNavigator and createBottomTabNavigator

So I was looking at React Native Tab Navigation v5 (https://reactnavigation.org/docs/tab-based-navigation) and I can't seem to figure out how I can have a tab navigator and a stack navigator at the same time.

//react-native-gesture-handler at top according to reactnavigation.org/docs/
import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text } from 'react-native';

//npm packages
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//pages
import login from './pages/login';
import main from './pages/main'; 
import page1 from './pages/page1';
import page2 from './pages/page2';
import page3 from './pages/page3';
import page4 from './pages/page4';
import page5 from './pages/page5';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const TabStack = () => {
  return (
      <Tab.Navigator>
        <Tab.Screen name="Page1" component={page1} />
        <Tab.Screen name="Page2" component={page2} />
      </Tab.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" headerMode="none">
        <Stack.Screen name="Login" component={login} />
        <Stack.Screen name="Main" component={main} />
        <Stack.Screen name="page1" component={page1} />
        <Stack.Screen name="page2" component={page2} />
        <Stack.Screen name="page3" component={page3} />
        <Stack.Screen name="page4" component={page4} />
        <Stack.Screen name="page5" component={page5} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

The idea is that I want to be able to navigate between all screens but I want to include a bottomTabNavigator only on some. Anyone can give me a hint on how can this be achieved in React Native?

Upvotes: 0

Views: 808

Answers (1)

fannolo
fannolo

Reputation: 527

From the documentation of React navigation 5

The easiest way to achieve this is to nest the tab navigator inside the first screen of the stack instead of nesting stack inside tab navigator

This is an example from the documentation: 

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

Which in your case would translate into put all the screen where you want to show the tab bar into a TabStack: 

const TabStack = () => {
  return (
      <Tab.Navigator>
        <Tab.Screen name="Page1" component={page1} />
        <Tab.Screen name="Page2" component={page2} />
      </Tab.Navigator>
  );
}

and all the other screens and the tab navigator in the stack navigator

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" headerMode="none">
        <Stack.Screen name="Page1" component={TabStack}
        <Stack.Screen name="Login" component={login} />
        <Stack.Screen name="Main" component={main} />
        <Stack.Screen name="page3" component={page3} />
        <Stack.Screen name="page4" component={page4} />
        <Stack.Screen name="page5" component={page5} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Upvotes: 1

Related Questions