Как отображать кнопки под прокруткой в ​​React Native

Всем добрый день, я работаю над этим реактивным проектом, и у меня возникла проблема с компонентом scrollView и позициями кнопок. поэтому в основном я хочу иметь 2 кнопки, чтобы либо подтвердить, либо отменить мой выбор из scrollView, под прокруткой, и каждая из них заполняет половину ширины. и кнопки, и прокрутка находятся внутри модального окна.

Я пробовал все комбинации flexbox и высоты, которые мне удалось придумать, но ничего не сработало, и высота раздела, включая кнопки, по-прежнему намного больше, чем я хочу, и кнопки не расположены рядом.

это компонент с проблемой:

import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Modal, TouchableHighlight, ScrollView, FlatList } from 'react-native';
import { NavigationActions } from "react-navigation";
import genericStyle from '../../styles/generic-style';
import { colors, fontSizes } from '../../styles/base';
import values from '../../styles/responsive';
import NAVLogo from '../generic/NAVLogo';

export default class Welcome extends Component {
  state = {
    modalVisible: false,
    values: [
      {
        id: 1,
        text: "one"
      },
      {
        id: 2,
        text: "two"
      },
      {
        id: 3,
        text: "three"
      },
      {
        id: 4,
        text: "four"
      },
      {
        id: 5,
        text: "five"
      },
      {
        id: 6,
        text: "six"
      },
      {
        id: 7,
        text: "seven"
      },
    ]
  };

  setModalVisible(visible) {
    this.setState({ modalVisible: visible });
  }

  render() {
    return (
      <View style = {[styles.welcome, genericStyle.centerContainer]}>
        <Modal
          animationType = "slide"
          transparent = {true}
          visible = {this.state.modalVisible}
          onRequestClose = {() => {
            Alert.alert("Modal has been closed.");
          }}
        >
          <View style = {styles.modal}>
            <View style = {styles.modalContent}>
              <View style = {styles.scrollViewStyle}>
                <ScrollView style = {styles.scrollViewStyle}>
                  {this.state.values.map((value, index) => (
                    <TouchableHighlight
                      onPress = {() => console.info("TH1...")}
                      style = {styles.company}
                      key = {value.id}
                    >
                      <Text>{value.text}</Text>
                    </TouchableHighlight>
                  ))}
                </ScrollView>
              </View>
              <View
                style = {{
                  flex: 1,
                  flexDirection: "column",
                  height: "15%"
                }}
              >
                <TouchableOpacity
                  onPress = {() => {
                    this.setModalVisible(!this.state.modalVisible);
                  }}
                >
                  <Text>confirm</Text>
                </TouchableOpacity>
                <TouchableOpacity
                  onPress = {() => {
                    this.setModalVisible(!this.state.modalVisible);
                  }}
                >
                  <Text>cancel</Text>
                </TouchableOpacity>
              </View>
            </View>
          </View>
        </Modal>

        <NAVLogo />
        <Text style = {styles.text}>
          Welcome
          <Text style = {styles.uname}>
            {" " + this.props.navigation.getParam("uname", "Unknown")}
          </Text>
        </Text>
        <TouchableOpacity
          onPress = {() => {
            console.info("company");
            this.setModalVisible(true);
          }}
          style = {styles.btnContainer}
        >
          <View style = {styles.btn}>
            <Text style = {styles.btnText}>Select Company</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          onPress = {() => {
            console.info("log out");
            this.props.navigation.dispatch(
              NavigationActions.navigate({
                routeName: "Home"
              })
            );
          }}
          style = {styles.btnContainer}
        >
          <View style = {styles.btn}>
            <Text style = {styles.btnText}> Log out </Text>
          </View>
        </TouchableOpacity>
      </View>
    );
  }
}


const styles = StyleSheet.create({
  welcome: {
    backgroundColor: colors.sky
  },
  btn: {
    width: "75%",
    paddingVertical: 15,
    backgroundColor: colors.darksky,
    marginTop: values.mtb + 3,
    alignItems: "center"
  },
  btnText: {
    fontSize: values.fontSize + 2,
    color: colors.light
  },
  btnContainer: {
    width: "100%",
    alignItems: "center"
  },
  text: {
    fontSize: values.fontSize,
    color: colors.dark,
    fontWeight: "400",
    marginVertical: 20
  },
  uname: {
    fontWeight: "900",
    fontSize: values.fontSize + 2
  },
  modalContent: {
    width: "80%",
    backgroundColor: colors.light,
    flex: 0
  },
  modal: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
    backgroundColor: "rgba(00,00,00,0.3)"
  },
  company: {
    width: "100%",
    borderBottomColor: colors.dark,
    borderBottomWidth: 1,
    paddingLeft: 35,
    paddingVertical: 30
  },
  scrollViewStyle: {
    flexGrow: 0,
    flex: 0,
    height: "85%"
  }
});

вот как отображается модальное окно (я не так много работал над стилем, так как застрял с позиционированием кнопок в течение последних 2 часов):

я надеюсь, что кто-то может помочь мне с этим. я новичок в том, чтобы реагировать на нативные, поэтому я почти уверен, что это тривиальная проблема, которую я где-то пропустил.

спасибо всем заранее за их время и помощь.