how to display buttons under a scrollview in react native

good day everyone, i'm working on this react-native project and i got a problem with the scrollView component and buttons positions. so basically i want to have 2 buttons, to either confirm or cancel my choice from the scrollView, underneath the scrollview and each one is filling half the width. both the buttons and the scrollview are found inside a modal.

i have tried every combination of flexbox and heights i managed to think of but nothing worked and the height of the section including the buttons is still way bigger than i want and buttons are not side by side.

this the component with the problem:

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.log("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.log("company");
            this.setModalVisible(true);
          }}
          style={styles.btnContainer}
        >
          <View style={styles.btn}>
            <Text style={styles.btnText}>Select Company</Text>
          </View>
        </TouchableOpacity>
        <TouchableOpacity
          onPress={() => {
            console.log("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%"
  }
});

this is the way the modal is displayed (i haven't worked that much on styling since i was stuck with positioning the buttons for the past 2 hours):

screen shot

i hope someone can help me out with this. i'm new to react native so i'm pretty sure this is a trivial issue that i missed somewhere.

thanks to everyone in advance for the their time and help.

Solution

use flexDirection:'row' to make it side by side, and position:'absolute' to make it stay at the bottom

<View
   style={{
   position:'absolute', 
   bottom:10,
   flexDirection: "row",
   justifyContent:'space-between',
   width:'100%'
 }}>

  <TouchableOpacity>
    <Text> CONFIRM </Text>
  </TouchableOpacity>
  <TouchableOpacity>
    <Text> CANCEL </Text>
  </TouchableOpacity>

</View>