CODEWITHSUNDEEP
androidiosreact-native
Nicolas Silva
Nicolas Silva

Reputation: 649

How to include Drawer Navigator inside Stack Navigator inside Tab Navigator with a single navigation file

First of all, yes i'm aware there are many answers related with this question, but i found this specific way to make my navigation in react-native 0.60, the thing is, i haven't figure it out yet, and i don't want to scrape this navigation method to test a different one, this is the navigation file, not sure how to put the drawer inside where or how. 

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen
  },
  {
    defaultNavigationOptions: {
      header: null
    }
  }
);

const VacationsStack = createStackNavigator(
  {
    Vacations: VacationsScreen,
    Request: RequestScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#0091EA",
      },
      headerTintColor: "#FFF",
      title: "Vacaciones"
    }
  }
);

const HourAllocationsStack = createStackNavigator(
  {
    HourAllocations: HourAllocationsScreen,
    Allocations: AllocationsScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#0091EA"
      },
      headerTintColor: "#FFF",
      title: "Registro"
    }
  }
);

const ExpensesStack = createStackNavigator(
  {
    Expenses: ExpensesScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#0091EA"
      },
      headerTintColor: "#FFF",
      title: "Rendir"
    }
  }
);

const CertificatesStack = createStackNavigator(
  {
    Certificates: CertificatesScreen
  },
  {
    defaultNavigationOptions: {
      headerStyle: {
        backgroundColor: "#0091EA"
      },
      headerTintColor: "#FFF",
      title: "Certificados"
    }
  }
);

const MainApp = createBottomTabNavigator(
  {
    Home: HomeStack,
    Vacations: VacationsStack,
    HourAllocations: HourAllocationsStack,
    Expenses: ExpensesStack,
    Certificates: CertificatesStack
  },
  {
    defaultNavigationOptions: ({ navigation }) => ({
      tabBarIcon: () => {
        const { routeName } = navigation.state;
        if (routeName === "Home") {
          return (
            <Icon name="home" size={ 25 } color="gray"/>
          );
        }
        if (routeName === "Vacations") {
          return (
            <Icon5 name="sun" solid size={ 25 } color="gray"/>
          );
        }
        if (routeName === "Expenses") {
          return (
            <Icon5 name="plane" size={ 25 } color="gray"/>
          );
        }
        if (routeName === "Certificates") {
          return(
            <Icon name="bill" size={ 25 } color="gray"/>
          );
        }
        if (routeName === "HourAllocations") {
          return(
            <Icon name="clock" solid size={ 25 } color="gray"/>
          );
        }
      }
    }),
    tabBarOptions: {
      activeTintColor: "#FF6F00",
      inactiveTintColor: "#263238"
    },
  }
);

const DrawerNavigation = createDrawerNavigator({
  User: UserScreen,
  Settings: SettingsScreen
})

export default createAppContainer(MainApp);

Upvotes: 1

Views: 97

Answers (1)

hong developer
hong developer

Reputation: 13926

Put the tab navigator in the drawer Navigator, and put the drawer Navigator in the stack navigator.

const DrawerNavigation = createDrawerNavigator({
  User: UserScreen,
  Settings: SettingsScreen,
  MainTab : MainApp
},
{
 initialRouteName : 'MainTab'
})

...
const MainStack = createStackNavigator(
  {
    MainScreen: DrawerNavigation
  },
  {
   initialRouteName : 'MainScreen' 
  }
);

export default createAppContainer(MainStack);

Upvotes: 1

Related Questions