title: React native navigation shows White screen
body: <p>I am getting a white screen upon compilation using react-native navigation, Pls why is this so? I do not seem to get any Error codes, nothing, i just see a white screen. Why is this so? My codes Looks like this and shows I do not seem to have any errors so far.</p>
  
  <p>Here is what the Error seems to look like 
  <a href="https://postimg.cc/w3sfY6js" rel="nofollow noreferrer"><img src="https://i.postimg.cc/h42HxvFM/Error-Drawer.png" alt="Error-Drawer.png"></a></p>
  
  <p>As You can see it looks and compiles successfully but when i try to have a look to see what i have Done so far, i get a pure white screen</p>
  
  <p>My code looks thus :</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>//import liraries
  import React, { Component } from 'react';
  import { View, Text, StyleSheet } from 'react-native';
  import DrawerNavigator from './components/ControlPage';
  
  // create a component
  class App extends Component {
    render() {
      return (
        &lt;View style={styles.container}&gt;
          &lt;DrawerNavigator/&gt;
        &lt;/View&gt;
      );
    }
  }
  
  // define your styles
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      justifyContent: 'center',
      alignItems: 'center',
      backgroundColor: '#FFF',
    },
  });
  
  //make this component available to the app
  export default App;
  </code></pre>
  
  <p><strong>ControlPage.js</strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import { StyleSheet, View, Text, TouchableHighlight, Image } from 'react-native';
  
  import { createAppContainer} from 'react-navigation';
  import { createDrawerNavigator } from 'react-navigation-drawer'; 
  import Main from './Main';
  import Screen1 from './Screen1';
  import Screen2 from './Screen2';
  
  const MyDrawerNavigator = createDrawerNavigator({
  Home : {screen : Main},
  Screen1:{screen : Screen1},
  Screen2:{screen : Screen2},
   },
  {
     InitialRouteName : 'Home',
     drawerWidth : 300,
     drawerPosition: 'left'
  }
  );
  const AppContainer = createAppContainer(MyDrawerNavigator);
  
  // create a component
  class DrawerNavigator extends Component {
      render() {
          return (
              &lt;View style={styles.container}&gt;
                  &lt;AppContainer/&gt;
              &lt;/View&gt;
          );
      }
  }
  
  // define your styles 
  const styles = StyleSheet.create({
      view:{
      flex:1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: 'white',
  },
  text:{
      fontSize: 26,
      color: 'purple'
  },
  
  touchableHighlight: {
      width: 50,
      height: 50,
      backgroundColor: 'red',
      borderRadius : 50,
      alignItems : 'center',
      justifyContent: 'center',
      position: 'absolute',
      left: 10,
      top : 10
  },
  
  open: {
      color : 'white',
      fontSize : 16,
      fontWeight: 'bold'
  },
  
  });
  
  //make this component available to the app
  export default DrawerNavigator;
  </code></pre>
  
  <p><strong>Main.js</strong></p>
  
  <pre><code>//import liraries
  import React, { Component } from 'react';
  import { StyleSheet, View, Text, TouchableHighlight, Image } from 'react-native';
  
  // create a component
  class Main extends Component {
          static navigationOptions = {
          drawerLabel: 'Home',
          drawerIcon : () =&gt;(
              &lt;Image source ={require('../icons/home.png')}/&gt;
          ),
      }
      render() {
          return (
              &lt;View style={styles.container}&gt;
              &lt;TouchableHighlight onPress ={() =&gt; this.props.navigation.dispatch(DrawerActions.openDrawer())} style={styles.touchableHighlight} underlayColor={'rgba(0,0,0,0.8)'}&gt;
              &lt;Text style={styles.open}&gt;OPEN&lt;/Text&gt;
              &lt;/TouchableHighlight&gt;
              &lt;Text style={styles.text}&gt; Welcome to Home Screen &lt;/Text&gt;
              &lt;/View&gt;
          );
      }
  }
  
  // define your styles
  const styles = StyleSheet.create({
      container: {
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#FFFF',
      },
  
      text:{
      fontSize: 26,
      color: 'purple'
  },
  });
  
  //make this component available to the app
  export default Main;
  </code></pre>
  
  <p>Other screens are just to display and hide the Drawer. 
  Pls i need guidance am i missing anything?</p>