In this Gist I make some snippets of code of Navigation so you understand how to different label,Icon-name and Icon-header include in React Navigation

Drawer_Navigatiom.md

Drawer Navigation style so you make more Attract UI

const MyDrawerNavigator = createDrawerNavigator({

  Home:  MyHomeScreen,    
Notifications: MyNotificationsScreen,

},{
drawerOpenRoute : "DrawerOpen",

drawerCloseRoute: "DrawerClose",

drawerToggleRoute: "DrawerToggle",

drawerBackgroundColor: "#f4511e"//if you want to change the backgroundColor of the app drawer
}); 

NavigationWithAnimation.md

For Below code snippets are used for given the navigate Animation like swape top,left and Right

const AppNavigator = createStackNavigator({
  HomePage: {
    screen: HomePage,
    navigationOptions: {
      header: null, //if you want to remove header so that time used
      navigationOptions: {
      title: "HEllo", //header title Name
      headerTintColor: '#ffffff',//header color name
      headerStyle: {  //header styling 
        backgroundColor: '#2F95D6',//this attribute is used for the change the header color
        borderBottomColor: '#ffffff',//this attributes is used for the borderBottomColor
        borderBottomWidth: 1,//this attribute is used for borderWidth
      },
    }
    },
  },
  LogIn: {
    screen: SignIn,
    navigationOptions: {
      title: "Text Scanner",
      headerStyle: {
        backgroundColor: '#56CCF2',
      },
      headerTintColor: '#fff',

    }
  },
  SignUp: {
    screen: SignUp,
    navigationOptions: {
      title: "Text Scanner",
      headerStyle: {
        backgroundColor: '#56CCF2',
      },
      headerTintColor: '#fff',
    }
  },
  afterSignIn: {
    screen: MyApp,
    navigationOptions: ({ navigation }) => ({
      headerRight: <View style={{ flexDirection: "row" }}>
        <Iconss name="search1" size={22} style={{ marginRight: 21, color: "white" }} />
        <Icon name="ios-cloud-done" size={22} style={{ marginRight: 15, color: "white" }} />
        <Icons name="dots-three-vertical" size={22} style={{ marginRight: 9, color: "white" }} />
      </View>,
      headerLeft: <Icon name="md-menu" onPress={navigation.openDrawer} size={29} style={{ marginLeft: 20, color: "white" }} />,
      headerTitle: "Text Scanner",
      headerStyle: {
        backgroundColor: '#56CCF2',
        fontSize: 30
      },
      headerTintColor: '#fff',
    })
  }
}, {
  initialRouteName: "HomePage",//in this intialRouteName we mentioned in the screen
  mode: 'modal',
  defaultNavigationOptions: {
    gesturesEnabled: true,
  },
  transitionConfig: () => ({
    transitionSpec: {
      duration: 800,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
    },
    screenInterpolator: sceneProps => {
      const { layout, position, scene } = sceneProps;
      const { index } = scene;

      const height = layout.initHeight;
      const width = layout.initWidth;
      const translateX = position.interpolate({
        inputRange: [index - 1, index],
        outputRange: [width, 0],
      });

      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      });

      return { opacity, transform: [{ translateX }] };
    },
  }),
});

NavigatorOption.md

Navigator Options

const drawer = createDrawerNavigator({
  LogIn: {
    screen: tebNavigator,
    navigationOptions: {
      activeTintColor: '#e91e63',
      drawerIcon: ({ tintColor }) => (<Animate.View animation="rotate" iterationCount="infinite">
        <Icon name="ios-american-football" size={18} color={tintColor} />
      </Animate.View>
      )
    }
  }
})

activeTintColor is used for the when user click the sidebar and that time change the color of the activated bar

navigationOptions: ({ navigation }) => ({
      title: "Example",
      headerLeft: <Icon name="md-menu" size={24} style={{ margin: 20, color: "#ffff" }} onPress={navigation.openDrawer} />,
      headerStyle: {
        backgroundColor: '#56CC',
      },
      headerTintColor: '#fff',
    })

title is used for the App name on Header

headerLeft is used for the menu icon

headerStyle is used for the styling the header

headerTintColor is used for the Change the tint color

OpenDrawerWithoutHeader.md

In this techique I go through how to made drawer without header showcase

Show I give snippets so you idea more

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  TouchableOpacity,
  StatusBar,
} from 'react-native';
import { createSwitchNavigator, createAppContainer } from 'react-navigation';
import { createDrawerNavigator } from 'react-navigation-drawer';
import { createStackNavigator, HeaderTitle } from 'react-navigation-stack';
// import * as Animatable from 'react-native-animatable';
import * as Animate from 'react-native-animatable';
import Icon from 'react-native-vector-icons/Ionicons';
class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      animationEffect: "",
      animationEffec: ""
    }
  }
  render() {
    return (
      <View>

        <View style={{ marginTop: 260, flexDirection: "column", justifyContent: "center", alignItems: "center" }}>
          <TouchableOpacity activeOpacity={0.6} onPress={() => {
            // console.log("gajjar DArshit");
            this.setState({
              animationEffect: "bounceIn"
            })
            setTimeout(() => {
              this.props.navigation.navigate("LogIn")
            }, 350);
          }}>
            <Animate.View animation={this.state.animationEffect} style={{ borderWidth: 1, width: 120, height: 60, justifyContent: "center", alignItems: "center" }}>
              <Text style={{ fontSize: 20 }}>Login</Text>
            </Animate.View>
          </TouchableOpacity>
          <TouchableOpacity activeOpacity={0.6} onPress={() => {
            this.setState({
              animationEffec: "flipInY"
            })
            setTimeout(() => {
              this.props.navigation.navigate("SignUp")
            }, 620);
          }}>
            <Animate.View animation={this.state.animationEffec} style={{ marginTop: 10, borderWidth: 1, width: 120, height: 60, justifyContent: "center", alignItems: "center" }}>
              <Text style={{ fontSize: 20 }}>Signup</Text>
            </Animate.View>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
}
class Login extends React.Component {
  render() {
    return (
      <View>
        <Text style={{ fontSize: 23, marginTop: 290, alignSelf: "center" }} onPress={() => {
          this.props.navigation.navigate("Home")
        }}>I am Login</Text>
      </View>
    )
  }
}
class SignUp extends React.Component {
  render() {
    return (
      <View>
        <Text style={{ fontSize: 23, marginTop: 290, alignSelf: "center" }} onPress={() => {
          this.props.navigation.navigate("Home");
        }}>I am SignUp</Text>
      </View>
    )
  }
}
class Contact extends React.Component {
  render() {
    return (
      <View>
        <Text style={{ fontSize: 23, marginTop: 290, alignSelf: "center" }} onPress={() => {
          this.props.navigation.navigate("Home");
        }}>I am Contact</Text>
      </View>
    )
  }
}
class Logout extends React.Component {
  render() {
    return (
      <View>
        <Text style={{ fontSize: 23, marginTop: 290, alignSelf: "center" }} onPress={() => {
          this.props.navigation.navigate("Home");
        }}>I am Logout</Text>
      </View>
    )
  }
}
const teabNavigator = createStackNavigator({
  Logout: {
    screen: Logout,
    navigationOptions: ({ navigation }) => ({
      title: "Example",
      headerLeft: <Icon name="md-menu" size={24} style={{ margin: 20, color: "#ffff" }} onPress={navigation.openDrawer} />,
      headerStyle: {
        backgroundColor: '#56CC',
      },
      headerTintColor: '#fff',
    })
  },
})
class Mayhello extends React.Component {
  render() {
    return (
      <View><Text>hhahha</Text></View>
    )
  }
}
const treeNavigator = createStackNavigator({
  Mayhello: {
    screen: Mayhello,
    navigationOptions: ({ navigation }) => ({
      title: "Example",
      headerLeft: <Icon name="md-menu" size={24} style={{ margin: 20, color: "#ffff" }} onPress={navigation.openDrawer} />,
      headerStyle: {
        backgroundColor: '#56CC',
      },
      headerTintColor: '#fff',
    })
  },
})
const teeNavigator = createStackNavigator({
  Contact: {
    screen: Contact,
    navigationOptions: ({ navigation }) => ({
      title: "Example",
      headerLeft: <Icon name="md-menu" size={24} style={{ margin: 20, color: "#ffff" }} onPress={navigation.openDrawer} />,
      headerStyle: {
        backgroundColor: '#56CC',
      },
      headerTintColor: '#fff',
    })
  },
})
const tebNavigator = createStackNavigator({
  LogIn: {
    screen: Login,
    navigationOptions: ({ navigation }) => ({
      title: "Example",
      headerLeft: <Icon name="md-menu" size={24} style={{ margin: 20, color: "#ffff" }} onPress={navigation.openDrawer} />,
      headerStyle: {
        backgroundColor: '#56CC',
      },
      headerTintColor: '#fff',
    })
  },
  SignUp: {
    screen: SignUp,
    navigationOptions: ({ navigation }) => ({
      // title: "Example",
      // headerLeft: <Icon name="md-menu" size={24} style={{ margin: 20, color: "#ffff" }} onPress={navigation.openDrawer} />,
      headerStyle: {
        backgroundColor: '#56CC',
      },
      headerTintColor: '#fff',
    })
  },
  contact: {
    screen: Contact,
    navigationOptions: ({ navigation }) => ({
      title: "Example",
      headerLeft: <Icon name="md-menu" size={24} style={{ margin: 20, color: "#ffff" }} onPress={navigation.openDrawer} />,
      headerStyle: {
        backgroundColor: '#56CC',
      },
      headerTintColor: '#fff',
    })
  }
})

const drawer = createDrawerNavigator({
  LogIn: {
    screen: tebNavigator,
  },
  Logout: {
    screen: teabNavigator,
  },
  Contact: {
    screen: teeNavigator,
  },
  Mayhello: {
    screen: treeNavigator,
  }
})

const switching = createSwitchNavigator({
  Home: {
    screen: Home
  },
  LogIn: {
    screen: drawer
  },
})
const App = createAppContainer(switching);

export default App;

const style = StyleSheet.create({
  text: {
    fontSize: 23,
    marginTop: 270,
    alignSelf: "center"
  }
})

someNewNavigation.md

const AppNavigator=createStackNavigator({
  Home:{
    screen:Home
  },
  Navigate:{
    screen:Navigate
  }
},{
  initialRouteName: "HomePage",
  mode: 'modal',
  defaultNavigationOptions: {
    gesturesEnabled: true,
  },
})

For above code snippets used for the set the initialRouteName