import React from 'react';
import { View } from 'react-native';

class FlexDirectionBasics extends React.Component {
  render() {
    return (
      // Try with height: 300 instead of flex: 1
      <View style={{
        flex: 1,
        // row or column
        flexDirection: 'column',
        // flex-start, center, flex-end, space-around, space-between
        // space-evenly is also described, but throws invalid value error.
        justifyContent: 'space-around',
        // flex-start, center, flex-end, and stretch
        alignItems: 'center',
      }}>
        <View style={{ height: 50, width: 50, backgroundColor: 'powderblue' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'skyblue' }} />
        <View style={{ height: 50, width: 50, backgroundColor: 'steelblue' }} />
      </View>
    );
  }
}

export default FlexDirectionBasics;