title: React Native progress fill screen
body: <p>In my app, I am trying to display a progress bar using the <code>ActivityIndicator</code> upon a click event on a <code>TouchableHightlight</code> 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.</p>
  
  <pre><code>render()
  {
      let progress;
      if (this.state.isLoading) {
          progress = &lt;ActivityIndicator style={[progressStyle.container, progressStyle.horizontal]}/&gt;
      }
  
      return (
          &lt;ScrollView&gt;
              &lt;View style={{
                  zIndex: 1,
                  flex: 1,
                  alignItems: 'center',
                  justifyContent: "flex-start",
              }}&gt;
                  &lt;View style={{
                      flex: 1,
                      alignItems: 'flex-end',
                      paddingTop: 5,
                      paddingHorizontal: 10,
                      marginBottom: 10
                  }}&gt;
                      &lt;View style={{
                          flex: 1,
                          flexDirection: 'row',
                          alignItems: 'center',
                          marginTop: 8,
                          marginBottom: 8
                      }}&gt;
                          &lt;Text style={labelStyle}&gt;Name: &lt;/Text&gt;
                          &lt;TextInput
                              style={ textInputStyle }
                              value={ this.state.name }
                              onChangeText={(text) =&gt; {
                                  this.setState({
                                      name: text
                                  });
                              }} /&gt;
                      &lt;/View&gt;
                      &lt;View style={{
                          flex: 1,
                          flexDirection: 'row',
                          alignItems: 'center',
                          marginBottom: 8
                      }}&gt;
                          &lt;Text style={labelStyle}&gt;Start Date: &lt;/Text&gt;
                          &lt;DatePicker
                              style={ datePickerStyle }
                              date={this.state.startDate}
                              mode="date"
                              placeholder="select start date"
                              format="YYYY-MM-DD"
                              confirmBtnText="Confirm"
                              cancelBtnText="Cancel"
                              onDateChange={(date) =&gt; {
                                  this.setState({startDate: date});
                              }} /&gt;
                      &lt;/View&gt;
                      &lt;View style={{
                          flex: 1,
                          flexDirection: 'row',
                          alignItems: 'center',
                          marginBottom: 8
                      }}&gt;
                          &lt;Text style={labelStyle}&gt;End Date: &lt;/Text&gt;
                          &lt;DatePicker
                              style={ datePickerStyle }
                              date={this.state.endDate}
                              mode="date"
                              placeholder="select end date"
                              format="YYYY-MM-DD"
                              confirmBtnText="Confirm"
                              cancelBtnText="Cancel"
                              onDateChange={(date) =&gt; {
                                  this.setState({endDate: date});
                              }} /&gt;
                      &lt;/View&gt;
                      &lt;View style={{
                          flex: 1,
                          flexDirection: 'row',
                          alignItems: 'center',
                          marginBottom: 8
                      }}&gt;
                          &lt;Text style={labelStyle}&gt;Max members: &lt;/Text&gt;
                          &lt;TextInput
                              style={ textInputStyle }
                              keyboardType="numeric"
                              value={ this.state.maxMembers }
                              onChangeText={(text) =&gt; {
                                  this.setState({
                                      maxMembers: text
                                  });
                              }} /&gt;
                      &lt;/View&gt;
                      &lt;View style={{
                          flex: 1,
                          flexDirection: 'row',
                          alignItems: 'center',
                          marginBottom: 8
                      }}&gt;
                          &lt;Text style={labelStyle}&gt;Available Until: &lt;/Text&gt;
                          &lt;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) =&gt; {
                                  this.setState({availabilityDeadLine: date});
                              }} /&gt;
                      &lt;/View&gt;
                  &lt;/View&gt;
                  &lt;ListOption
                      text="Create Room"
                      style={{
                          backgroundColor: (this.state.name!='' &amp;&amp; this.state.startDate!='' 
                              &amp;&amp; this.state.endDate!='' &amp;&amp; this.state.maxMembers!='' 
                              &amp;&amp; this.state.availabilityDeadLine!='')? Colors.tintColor : '#232323',
                          textColor: Colors.tintTextColor,
                      }}
                      onClick={
                          () =&gt; {
                              this.state.isLoading=true; this.setState({});
                              var tDate = new Date();
                              tDate.setHours(0,0,0,0);
                              if(this.state.name != '' &amp;&amp; this.state.startDate != '' &amp;&amp; 
                                  this.state.endDate != '' &amp;&amp; this.state.maxMembers != '' &amp;&amp; 
                                  this.state.availabilityDeadLine != ''){
                                  if(new Date(this.state.startDate) &gt; new Date(this.state.endDate)){
                                      Alert.alert("start date cannot be after end date");
                                  } else if(new Date(this.state.endDate) &lt; tDate) {
                                      Alert.alert("end date cannot be before today");
                                  } else if(new Date(this.state.availabilityDeadLine) &lt; tDate) {
                                      Alert.alert("space has to be available at least up until today");
                                  } else {
                                      //     this.state.isLoading = false;
                                      //     this.props.navigation.goBack();
                                  }
                              }
                          }
                      } /&gt;
              &lt;/View&gt;          
              {progress}
          &lt;/ScrollView&gt;
  
      );
  }
  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
      }
  })
  </code></pre>
  
  <p>I've tried giving <code>contentContainerStyle={{flex:1}}</code> to my <code>ScrollView</code> but I don't want my <code>ListOption</code> element to take up all the leftover space on screen and look fat. Right now, my <code>ActivityIndicator</code> takes up the whole of <code>ScrollView</code>, which is not taking up the whole screen.</p>
  
  <p>So, will there be any way for me to give different <code>flex</code> abilities to the children of <code>ScrollView</code> element such that I can have my <code>ActivityIndicator</code> take up the whole screen while my <code>View</code> takes up as much as its contents?</p>