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.
Here is what the Error seems to look like
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
My code looks thus :
App.js
//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 (
<View style={styles.container}>
<DrawerNavigator/>
</View>
);
}
}
// 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;
ControlPage.js
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 (
<View style={styles.container}>
<AppContainer/>
</View>
);
}
}
// 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;
Main.js
//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 : () =>(
<Image source ={require('../icons/home.png')}/>
),
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight onPress ={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} style={styles.touchableHighlight} underlayColor={'rgba(0,0,0,0.8)'}>
<Text style={styles.open}>OPEN</Text>
</TouchableHighlight>
<Text style={styles.text}> Welcome to Home Screen </Text>
</View>
);
}
}
// 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;
Other screens are just to display and hide the Drawer. Pls i need guidance am i missing anything?