Blank screen is displayed - React Native

Question

I wrote a simple React Native app which shall display four colored rectangles. The app runs well but app is showing only a blank white screen. I replaced the content of the render function with just a text, that is displayed properly. What is going wrong?

Code provided below:

index.android.js:

import React, { Component } from 'react';
import { Text,
  AppRegistry,
  StyleSheet,
  View
} from 'react-native';

import Mainscreen from './components/screens/mainscreen.js';


 class styling extends Component {
  render() {
    return (
<View>
<Mainscreen />
</View>
);

  }
}
AppRegistry.registerComponent('styling', () => styling);

Mainscreen.js:

import React,{Component} from 'react';
import {View, StyleSheet}  from 'react-native';

export default class Mainscreen extends Component{
  render(){
return (
<View style={styles.container}>
<View style={styles.smallContainer}>
  <View style={styles.above}>
    <View style={styles.leftAbove}></View>
    <View style={styles.rightAbove}></View>
  </View>
  <View style={styles.bottom}>
    <View style={styles.leftBottom}></View>
    <View style={styles.rightBottom}></View>
    </View>
  </View>
</View>
);
}
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor: 'black',
    flexDirection:'column'
  },
  above:{
    flex:1,
    flexDirection:'row',
    marginTop: 10,
    marginLeft: 10,
    marginBottom: 10,
    marginRight: 10
  },
  bottom:
  {
      flex:1,
      flexDirection:'row',
      marginTop: 10,
      marginLeft: 10,
      marginBottom: 10,
      marginRight: 10
  },
leftAbove:{
  backgroundColor: 'green',
  flex: 0.6,
},
rightAbove:{
backgroundColor: 'red',
flex: 0.4,
},
leftBottom:{
backgroundColor: 'blue',
flex: 0.4,
},
rightBottom:{
backgroundColor: 'yellow',
flex: 0.6,
},
smallContainer:{
  flex:1,
  padding: 10,
  backgroundColor:'black'
}
});

Answer 1

Give flex: 1 to your View in styling component (everything else is fine) as follows:

class styling extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <Mainscreen />
            </View>
        );

    }
}

notice the style of flex: 1 in top level view component. It is necessary to tell the view to take the full-screen width and height. Otherwise, height and width will be 0.