text above row of buttons in React Native

Question

This should be relatively easy for a React Native expert. I simply wish to display some text, and then under the text should be a row of buttons. Beginning with the row of buttons, this seems to work fine:

constructor(props) {
  super(props);
   this.state = {
   titleText: "Bird's Nest",
   bodyText: "This is not really a bird nest."
  };
}


  render() {
  return (
    <View style={styles.container}>

      <View style={styles.buttonContainer}>
       <Button title="Camera"/>
      </View>
      <View style={styles.buttonContainer}>
       <Button title="Start"/>
      </View>
      <View style={styles.buttonContainer}>
       <Button title="Website"/>
      </View>
      <View style={styles.buttonContainer}>
       <Button title="Stop"/>
      </View>

    </View>

   );  //return
  }  //render

const styles = StyleSheet.create({
  page:{
    flex:1,
    backgroundColor: "#000",
    paddingTop:50,
    color: 'white'
  },
  container: {
    flex: 1,
    backgroundColor: "#000",
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: "center"
  },
  buttonContainer: {
    flex: 1,
  },
  container1: {
    backgroundColor: 'powderblue',
    height : 100
  },
  container2: {
    backgroundColor: 'grey',
    height : 100
  },
  baseText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold",
    color: 'white'
  }
});

When I attempt to add the text...it is functional however the text is positioned before the row of buttons instead of placement over/above the row of buttons. Here is the same code inclusive of the text:

  ...
  render() {
  return (
    <View style={styles.container}>

      <Text style={styles.baseText}>
       <Text style={styles.titleText} onPress={this.onPressTitle}>
         {this.state.titleText}
         {"\n"}
         {"\n"}
       </Text>
       <Text numberOfLines={5}>{this.state.bodyText}</Text>
      </Text>

      <View style={styles.buttonContainer}>
       <Button title="Camera"/>
      </View>
      <View style={styles.buttonContainer}>
       <Button title="Start"/>
      </View>
      <View style={styles.buttonContainer}>
       <Button title="Website"/>
      </View>
      <View style={styles.buttonContainer}>
       <Button title="Stop"/>
      </View>

    </View>

   );  //return
  }  //render
  ...

So basically the 'text' is rendered and then the 4 buttons are rendered with everything all 'crushed' together...all within the same row. There probably needs to be some sort of 'column' for the text however I have no idea how to combine 'column' and 'row' (necessary for the buttons) in React Native (within the same page 'container'). Or perhaps there is some other way to do it?

In addition, it would be nice if the row of buttons appeared along the bottom of the device screen instead of centered. I had changed the 'alignItems' in the 'styles.container' to 'baseline' (before I added any text) however that did not accomplish the desired result. I thank you in advance for any advice.

UPDATE:

At this point I have modified my code above and what I have now is something more along the lines of what I am seeking...although not perfect. There is probably a better way however here is what my code looks like now:

import BoxContainer from './BoxContainer';

  render() {
  return (
  <View style={styles.page}>

   <BoxContainer style={styles.container1}>
       <Text>Bunch of text here.</Text>
   </BoxContainer>

   <BoxContainer style={styles.container2}>
   <View style={styles.container}>
    <View style={styles.buttonContainer}>
     <Button title="Camera"/>
    </View>
    <View style={styles.buttonContainer}>
     <Button title="Start"/>
    </View>
    <View style={styles.buttonContainer}>
     <Button title="Website"/>
    </View>
    <View style={styles.buttonContainer}>
     <Button title="Stop"/>
    </View>
   </View>
   </BoxContainer>

  </View>
  );  //return
 }  //render

The code for 'BoxContainer' is here, a resource I found on the Internet somewhere:

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

const BoxContainer = props => {

    return (
        <View style={{...styles.boxContainer, ...props.style}}>
        {props.children}
        </View>
    );

};

const styles = StyleSheet.create({

    boxContainer:{
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    height:200,
    margin: 20,
    alignItems: 'center',
    justifyContent: 'center'
    }

});

export default BoxContainer;

As mentioned, this is close to what I am seeking however I wish I could find a way to do it without the structured box containers...or perhaps that is necessary in React Native...?