title: Blank screen is displayed - React Native
body: <p>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?</p>
  
  <p>Code provided below:</p>
  
  <p><strong>index.android.js:</strong></p>
  
  <pre><code>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 (
  &lt;View&gt;
  &lt;Mainscreen /&gt;
  &lt;/View&gt;
  );
  
    }
  }
  AppRegistry.registerComponent('styling', () =&gt; styling);
  </code></pre>
  
  <p><strong>Mainscreen.js:</strong></p>
  
  <pre><code>import React,{Component} from 'react';
  import {View, StyleSheet}  from 'react-native';
  
  export default class Mainscreen extends Component{
    render(){
  return (
  &lt;View style={styles.container}&gt;
  &lt;View style={styles.smallContainer}&gt;
    &lt;View style={styles.above}&gt;
      &lt;View style={styles.leftAbove}&gt;&lt;/View&gt;
      &lt;View style={styles.rightAbove}&gt;&lt;/View&gt;
    &lt;/View&gt;
    &lt;View style={styles.bottom}&gt;
      &lt;View style={styles.leftBottom}&gt;&lt;/View&gt;
      &lt;View style={styles.rightBottom}&gt;&lt;/View&gt;
      &lt;/View&gt;
    &lt;/View&gt;
  &lt;/View&gt;
  );
  }
  }
  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'
  }
  });
  </code></pre>