React Native Code to vertically stack two sets of boxes

Here's a code I experimented with while brushing up on React Native. This stacks two sets of boxes in a vertical position. The first set is stacked to the top, while the second at stacked at the bottom. Here is the output on the mobile screen when viewed in the normal landscape manner:

When the mobile device is tilted, the auto rotate still keeps the boxes in their default positions.

My React Native code defines two components for the boxes, the TopBoxes, which well, stacks the first set of boxes (the red, green and blue) to the top and the BottomBoxes, which well again, stacks the second set of boxes (the blue variations) to the bottom.

The main component AlignItemsBasics, will render the main View, which in turn calls the TopBoxes and BottomBoxes components. Both TopBoxes and BottomBoxes components styles will overwrite the default AlignItemsBasics style.

The full code is shown below

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

class TopBoxes extends Component{
 render(){
  return(
   <View style={{
    flex:1,
    justifyContent: 'flex-start',
    alignItems: 'flex-start',
   }}>
    <View style={{width: 50, height: 50, backgroundColor: 'red'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'green'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'blue'}} />
   </View>
  );
 }
}

class BottomBoxes extends Component{
 render(){
  return(
   <View style={{
    flex:1,
    justifyContent: 'flex-end',
    alignItems: 'flex-end',
   }}>
    <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
    <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
   </View>
  );
 }
}

export default class AlignItemsBasics extends Component{
 render(){
  return(
   <View style={{
    flex:1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
   }}>
   <TopBoxes />
   <BottomBoxes />
   </View>
  );
 }
};

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

The JSFiddle link for the code can be found at https://jsfiddle.net/jundolor/kphc0a4w/