2

Is there a possibility of nesting tab navigator inside a drawer navigator in react-native? when the hamburger menu icon is invoked,I want the drawer to cover the entire screen and implement Tab navigator inside of it. I need some help with this.

Aishwarya R M
  • 123
  • 1
  • 10

2 Answers2

0

To cover the entire screen you can set the drawerWidth to be the width of the screen. see how to get the screen width in react native documentation

You can use the contentComponent to render the tab navigator:

import { createDrawerNavigator } from 'react-navigation-drawer'
import { Dimensions } from 'react-native'

import MyTabNavigator from 'path-to-my-tab-navigator'

const { width } = Dimensions.get('window')

const DrawerNavigator = createDrawerNavigator(
  {
    ... // screens 
  },
  {
    drawerWidth: width
    contentComponent: MyTabNavigator
  }
)

See the documentation

Caio Quirino
  • 1
0

Same problem. Firstly, I couldn't set Tab Navigation inside Drawer Navigation.

For that I used "React Native Tab View" you can install it from "https://www.npmjs.com/package/react-native-tab-view", its worked with me.

<Drawer.Navigator
  drawerContent={(props) => <CustomDrawerComp {...props} />}>
  <Drawer.Screen name="MainStack" component={MainStack} />
</Drawer.Navigator>


export const CustomDrawerComp = (props) => {
  const {navigation} = props;
  const layout = useWindowDimensions();

  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'first', title: 'FIRST' },
    { key: 'second', title: 'SECOND' },
  ]);

  return (
    <TabView
      navigationState={{ index, routes }}
      renderScene={SceneMap({
        first: FirstTab,   << Add first tab view
        second: SecondTab,   << Add second tab view
      })}
      onIndexChange={setIndex}
      initialLayout={{ width: layout.width }}
      />
  );
};

Also, You might get a simple error after used it "Invariant Violation: requireNativeComponent: "RNCViewPager" was not found in the UIManager" it's very easy don't worry, You can solve it from "https://github.com/ptomasroos/react-native-scrollable-tab-view/issues/1050"

I hope that helping some one.

Image Tabs inside Drawer Navigation

TahaStackOverFlow
  • 1
  • 1