not sure how to implement a drawer navigator in my project - react-native

Question

I am trying to implement a drawer navigator in my project. The drawer will appear in all of the following Scenes: AllPractice, Practice, Playing Tests, Question (all tabs)
Individuals, Groups, Pending. (also tabs).
And all of the other main screens: Awards, GameOn, Uploads.
The issue is I don't know where to implement it in my project.
All my navigation is in the navigation folder.
This is the basic code for the drawer:
AppDrawerNavigator = DrawerNavigator({
FirstScreen: { Screen: FirstScreen },
SecondScreen: { Screen: SecondScreen }
});
Here is where all my navigation code is: its in this file
import { StackNavigator, TabNavigator, DrawerNavigator } from 'react-navigation';
// Home scenes
import Home from '../scenes/Home';
// Authentication scenes
import Login from '../scenes/authentication/Login';
import SignUpStep from '../scenes/authentication/SignUpStep';
import SelectTeachers from '../scenes/authentication/SelectTeachers';
// import Dashboard from '../components/Dashboard'
// import FeedScreen from '../components/FeedScreen'
import AwardsScreen from '../scenes/award/AwardsScreen';
// import StudentsScreen from '../components/StudentsScreen'
import GameOnScreen from '../scenes/game/GameOnScreen';
// All practice scenes
import AllPractice from '../scenes/practice/AllPractice';
import Practice from '../scenes/practice/Practice';
import PlayingTests from '../scenes/practice/PlayingTests';
import Questions from '../scenes/practice/Questions';
import Individuals from '../scenes/practice/Individuals';
import FirstScreen from '../scenes/drawer/firstScreen';
import SecondScreen from '../scenes/drawer/secondScreen';
// Group
import Groups from '../scenes/group/Groups';
// Upload
import UploadsScreen from '../scenes/upload/UploadsScreen';
import Pending from '../scenes/upload/Pending';
// Constant for tab menus
const submissionMenu = {
screen: TabNavigator({
All: { screen: AllPractice },
Practice: { screen: Practice },
PlayingTests: { screen: PlayingTests },
Questions: { screen: Questions }
}, {
tabBarPosition: 'top',
flex: 2 / 3,
tabBarOptions: {
activeTintColor: '#33ACDE',
labelStyle: {
fontSize: 12,
},
tabStyle: {
width: 50
},
}
}
)
};
const studentMenu = {
screen: TabNavigator({
Individuals: { screen: Individuals },
Groups: { screen: Groups },
Pending: { screen: Pending }
}, {
tabBarPosition: 'top',
flex: 1 / 2,
tabBarOptions: {
activeTintColor: '#33ACDE',
}
}
)
};
// Navigation defined
const navigator = StackNavigator({
home: { screen: Home },
signup: { screen: SignUpStep },
login: { screen: Login },
selectTeachers: { screen: SelectTeachers },
dashboard: {
screen: TabNavigator({
Submissions: submissionMenu,
Students: studentMenu,
Awards: { screen: AwardsScreen },
GameOn: { screen: GameOnScreen },
Uploads: { screen: UploadsScreen }
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
activeTintColor: '#33ACDE',
}
}),
navigationOptions: {
title: 'PRACTICIA',
headerLeft: null,
headerStyle: {
backgroundColor: '#33ACDE',
},
headerTitleStyle: {
color: 'white'
}
}
}
});
export default navigator;

Answer 1

Drawer Navigation is like a Tab navigation. It means if you want to use a Drawer to offer a user to navigate your app, then forget about the tabs.
Or, if you want to use a drawer just as a controller like you put some buttons on it.
then, it will be like this.
AppDrawerNavigator = DrawerNavigator({
FirstScreen: { Screen: navigator },
});
I put your 'navigator' on the drawer navigation. Then you can use AppDrawerNavigator as a root.
Then, you can use 'contentComponent' in drawerNavigatorOption to put some buttons or view.