Skip to content

Instantly share code, notes, and snippets.

@shawn-kb
Created November 21, 2018 22:24
Show Gist options
  • Save shawn-kb/03e4894ec9b2596da58e1d28cbd75b3d to your computer and use it in GitHub Desktop.
Save shawn-kb/03e4894ec9b2596da58e1d28cbd75b3d to your computer and use it in GitHub Desktop.
nesting drawer in tab nav
// in my MainTabNavigator
import RainMapScreen from '../screens/RainMapScreen';
import GroupMessageHistoryScreen from '../screens/GroupMessageHistoryScreen';
import GroupDrawer from './GroupDrawer'
export default createBottomTabNavigator(
{
GroupDrawer: {
screen: GroupDrawer,
},
Messages: {
screen: GroupMessageHistoryScreen,
},
Rain: {
screen: RainMapScreen,
},
},
{
navigationOptions: ({ navigation }) => ({
tabBarIcon: ({ focused }) => {
const { routeName } = navigation.state;
let iconName;
switch (routeName) {
case 'Summary':
iconName = Platform.OS === 'ios'
? `ios-information-circle${focused ? '' : '-outline'}`
: 'md-information-circle';
break;
case 'SelectGroup':
iconName = Platform.OS === 'ios'
? `ios-link${focused ? '' : '-outline'}`
: 'md-link';
break;
case 'Settings':
iconName = Platform.OS === 'ios'
? `ios-options${focused ? '' : '-outline'}`
: 'md-options';
}
return (
<Ionicons
name={iconName}
size={28}
style={{ marginBottom: -3 }}
color={focused ? Colors.tabIconSelected : Colors.tabIconDefault}
/>
);
},
}),
tabBarPosition: 'bottom',
animationEnabled: false,
swipeEnabled: false,
}
);
// -------------------- DIFFERENT FILE -------------------------------
// in my GroupDrawer
import { createDrawerNavigator } from 'react-navigation';
import SummaryScreen from '../screens/SummaryScreen'
import SettingsScreen from '../screens/SettingsScreen';
import GroupHelpScreen from '../screens/GroupHelpScreen'
import ContactScreen from '../screens/ContactScreen'
const GroupDrawer = createDrawerNavigator ({
Summary: {
screen: SummaryScreen,
navigationOptions: {title: 'Summary'},
},
Profile: {
screen: SettingsScreen,
navigationOptions: {title: 'profile'},
},
Contact: {
screen: ContactScreen,
navigationOptions: {title: 'contact'},
},
Help: {
screen: GroupHelpScreen,
navigationOptions: {title: 'help'},
},
});
export default GroupDrawer;
@farouk-23
Copy link

// in navigator.js, add this:

export default class MainScreen extends Component{
  static router = MainTabNavigator.router;
  render() {
    return (
      <MainTabNavigator
        navigation={this.props.navigation}
      />
    );
  }
}

// that's your main screen

const GroupDrawer = createDrawerNavigator({
  Main: { screen: MainScreen },
}, {
    // contentComponent: props => <SideBar {...props} />,
  });

export default createAppContainer(GroupDrawer);

// I hope, this will help you.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment