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

class FlexDirectionBasics extends Component {
  render() {
    return (
      // Try setting `flexDirection` to `column`.
      <View style={{flex: 1, height: '50px', backgroundColor: 'yellow'}}>
        <View style={{flex: 0.33, width: '80%', height: '0px', backgroundColor: 'yellow'}} />
        <View style={{flex: 1, flexDirection: 'column', justifyContent: 'space-around',alignItems:'center', backgroundColor: 'red'}}>
          <View style={{flex: 0.33, width: '80%', height: '50px', backgroundColor: 'yellow'}} />
          <View style={{ width: '80%', height: '50px', backgroundColor: 'green'}} />
          <View style={{flex: 0.33, width: '80%', height: '50px', backgroundColor: 'powderblue'}} />
        </View>
        <View style={{flex: 0.33, width: '100%', height: '50px', backgroundColor: 'yellow'}}>
          <View style={{flex: 1, width: '100%', alignItems: 'center', justifyContent: 'space-around', height: '50px', backgroundColor: 'blue'}}>
            <View style={{flex: 0.33, width: '80%', height: '30px', backgroundColor: 'powderblue'}} />
            <View style={{flex: 0.33, width: '80%', height: '30px', backgroundColor: 'powderblue'}} />
          </View>
        </View>
      </View>
    );
  }
};

AppRegistry.registerComponent('AwesomeProject', () => FlexDirectionBasics);