React Native progress fill screen - react-native

Question

In my app, I am trying to display a progress bar using the ActivityIndicator upon a click event on a TouchableHightlight element. The problem is that I would like to have my progress bar fill up the whole screen (even filling up the spaces occupied by the navigation bar). Or if it is possible, a progress bar that takes up all the touch events on the screen while it is being displayed.
render()
{
let progress;
if (this.state.isLoading) {
progress = <ActivityIndicator style={[progressStyle.container, progressStyle.horizontal]}/>
}
return (
<ScrollView>
<View style={{
zIndex: 1,
flex: 1,
alignItems: 'center',
justifyContent: "flex-start",
}}>
<View style={{
flex: 1,
alignItems: 'flex-end',
paddingTop: 5,
paddingHorizontal: 10,
marginBottom: 10
}}>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginTop: 8,
marginBottom: 8
}}>
<Text style={labelStyle}>Name: </Text>
<TextInput
style={ textInputStyle }
value={ this.state.name }
onChangeText={(text) => {
this.setState({
name: text
});
}} />
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8
}}>
<Text style={labelStyle}>Start Date: </Text>
<DatePicker
style={ datePickerStyle }
date={this.state.startDate}
mode="date"
placeholder="select start date"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => {
this.setState({startDate: date});
}} />
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8
}}>
<Text style={labelStyle}>End Date: </Text>
<DatePicker
style={ datePickerStyle }
date={this.state.endDate}
mode="date"
placeholder="select end date"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
onDateChange={(date) => {
this.setState({endDate: date});
}} />
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8
}}>
<Text style={labelStyle}>Max members: </Text>
<TextInput
style={ textInputStyle }
keyboardType="numeric"
value={ this.state.maxMembers }
onChangeText={(text) => {
this.setState({
maxMembers: text
});
}} />
</View>
<View style={{
flex: 1,
flexDirection: 'row',
alignItems: 'center',
marginBottom: 8
}}>
<Text style={labelStyle}>Available Until: </Text>
<DatePicker
style={ datePickerStyle }
date={this.state.availabilityDeadLine}
mode="date"
placeholder="select date til when this space is available"
format="YYYY-MM-DD"
confirmBtnText="Confirm"
cancelBtnText="Cancel"
customStyles={{
placeholderText:{
textAlign: 'center'
}
}}
onDateChange={(date) => {
this.setState({availabilityDeadLine: date});
}} />
</View>
</View>
<ListOption
text="Create Room"
style={{
backgroundColor: (this.state.name!='' && this.state.startDate!=''
&& this.state.endDate!='' && this.state.maxMembers!=''
&& this.state.availabilityDeadLine!='')? Colors.tintColor : '#232323',
textColor: Colors.tintTextColor,
}}
onClick={
() => {
this.state.isLoading=true; this.setState({});
var tDate = new Date();
tDate.setHours(0,0,0,0);
if(this.state.name != '' && this.state.startDate != '' &&
this.state.endDate != '' && this.state.maxMembers != '' &&
this.state.availabilityDeadLine != ''){
if(new Date(this.state.startDate) > new Date(this.state.endDate)){
Alert.alert("start date cannot be after end date");
} else if(new Date(this.state.endDate) < tDate) {
Alert.alert("end date cannot be before today");
} else if(new Date(this.state.availabilityDeadLine) < tDate) {
Alert.alert("space has to be available at least up until today");
} else {
// this.state.isLoading = false;
// this.props.navigation.goBack();
}
}
}
} />
</View>
{progress}
</ScrollView>
);
}
const progressStyle = StyleSheet.create({
container: {
zIndex: 4,
justifyContent: 'center',
backgroundColor: '#565656',
position: 'absolute',
top:0, left: 0, right: 0, bottom: 0
},
horizontal: {
flexDirection: 'row',
justifyContent: 'space-around',
padding: 10
}
})
I've tried giving contentContainerStyle={{flex:1}} to my ScrollView but I don't want my ListOption element to take up all the leftover space on screen and look fat. Right now, my ActivityIndicator takes up the whole of ScrollView, which is not taking up the whole screen.
So, will there be any way for me to give different flex abilities to the children of ScrollView element such that I can have my ActivityIndicator take up the whole screen while my View takes up as much as its contents?

Answer 1

You would need to wrap it inside a modal if you want it to fill the entire and set {width: "100%", height: "100%"}