how to display buttons under a scrollview in react native - react-native

Question

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):
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.

Answer 1

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>