React Native View not displaying anything - react-native

Question

I followed the tutorial Here to set up a drawer navigator for my app and I'm doing pretty much everything the same as this guide mentions but my output is something like this
According to the guide though, and according to my code there should be text in the middle of the white empty screen. This makes me think that the View tag of my home file is not working or it's not rendering for some reason but the render function does get called though, i see the logs and the console.log inside the function does show up there, so I just can't figure out what the issue is here.
Here's my code:
Home.js
class Home extends Component{
render() {
console.log("I AM HERE")
return (
<View style={styles.container}>
<Text style={styles.text}>Home Page</Text>
</View>
)
}
}
styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 20,
alignItems: 'center',
marginTop: 50,
justifyContent: 'center',
},
text: {
fontSize: 50,
color: 'red'
}
})
HomeRoute.js
const ROUTES = createStackNavigator({
[ROUTE_NAMES.HOME]: {
screen: Home,
navigationOptions: ({ navigation }) => ({
title: 'Home',
headerLeft: <SideDrawer navigationProps={navigation} />,
headerStyle: {
backgroundColor: '#FF9800',
},
headerTintColor: '#fff',
}),
},
});
const HOME_ROUTES = createAppContainer(ROUTES);
export default HOME_ROUTES;
SideDrawer.js
export default class NavigationDrawerStructure extends Component {
toggleDrawer = () => {
this.props.navigationProps.toggleDrawer();
};
render() {
return (
<View style={{ flexDirection: 'row' }}>
<TouchableOpacity onPress={this.toggleDrawer.bind(this)}>
{/*Donute Button Image */}
<Image
source={drawerImage}
style={{ width: 25, height: 25, marginLeft: 5 }}
/>
</TouchableOpacity>
</View>
);
}
}

Answer 1

There is quite a difference between CSS flexbox and the one implemented by Facebook. Lots of things in common but defaults are very different. Specifically:
Everything is displayed: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.
flex: attribute is only used when at the same level there are few components with different flex values (flex: 1, flex: 3) means that the second element should be 3 times bigger than the first one. flex attribute is the only one supported (no grow/shrink support).
More info: yoga

Answer 2

Do you have an App.js file ? I don't see it in your post. If not, you should add the code below:
import React from 'react';
import { View } from 'react-native';
import HomeRoute from './your_path/HomeRoute.js';
export default class App extends React.Component {
render() {
return (
<View style={{ flex: 1 }}>
<HomeRoute/>
<FlashMessage position="top" />
</View>
);
}
}
Otherwise I will be curious to glance your App.js.