How to do it...

1. In App.js, let's import the dependencies we'll need for our app:

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

1. Our application only needs a render method since we're building a static layout.  The rendered layout consists of a container View element and three child View elements for each colored section of the app:

export default class App extends React.Component { 
 render() { 
  return ( 
    <View style={styles.container}> 
      <View style={styles.topSection}> </View> 
       <View style={styles.middleSection}></View> 
       <View style={styles.bottomSection}></View> 
    </View> ); 
  } 
 }

1. Next, we can begin adding our styles. The first style we'll add will be applied to the View element that wraps our entire app. Setting the flex property to 1 will cause all children elements to fill all empty space:

const styles = StyleSheet.create({
  container: {
    flex: 1,
  }
});

1. Now, we can add the styles for the three child View elements. Each section has a flexGrow property applied to it, which dictates how much of the available space each element should take up. topSection and bottomSection are both set to 3, so they'll take up the same amount of space. Since the middleSection has the flexGrow property set to 1, this element will take up one third of the space that topSection and bottomSection take up:

  topSection: {
    flexGrow: 3,
    backgroundColor: '#5BC2C1',
  },
  middleSection: {
    flexGrow: 1,
    backgroundColor: '#FFF',
  },
  bottomSection: {
    flexGrow: 3,
    backgroundColor: '#FD909E',
  },

1. If we open our application in the simulators, we should already be able to see the basic layout taking shape:

1. Here, we can add a Text element to each of the three child View elements we created in step 2. Note the newly added code has been highlighted:

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.topSection}>
          <Text style={styles.topSectionText}>
            4  N A M E S
          </Text>
        </View>
        <View style={styles.middleSection}>
          <Text style={styles.middleSectionText}>
            I P S U M
          </Text>
        </View>
        <View style={styles.bottomSection}>
          <Text style={styles.bottomSectionText}>
            C O M
          </Text>
        </View>
      </View>
    );
  }

1. The text for each section defaults to the top-left corner of that section. We can use flexbox to justify and align each of these elements to the desired positions. All three child View elements have the alignItems flex property set to 'center', which will cause the children of each element to be centered along the x axis. justifyContent is used on the middle and bottom sections to define how child elements should be justified along the y axis:

onst styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  topSection: {
    flexGrow: 3,
    backgroundColor: '#5BC2C1',
    alignItems: 'center',
  },
  middleSection: {
    flexGrow: 1,
    backgroundColor: '#FFF',
    justifyContent: 'center',
    alignItems: 'center',
  },
  bottomSection: {
    flexGrow: 3,
    backgroundColor: '#FD909E',
    alignItems: 'center',
    justifyContent: 'flex-end'
  }
});

1. All that's left to be done is to add basic styles to the Text elements to increase fontSize, fontWeight, and the required margin:

  topSectionText: {
    fontWeight: 'bold',
    marginTop: 50
  },
  middleSectionText: {
    fontSize: 30,
    fontWeight: 'bold'
  },
  bottomSectionText: {
    fontWeight: 'bold',
    marginBottom: 30
  }

1. If we open our application in simulators, we should be able to see our completed layout: