title: React Native: How to render a number of conditional views with coupled conditions?
body: <p>One of my components has about four different states it could be in, each with their own full-screen views (loading, error/retry, and 2 others). </p>
  
  <p>Right now my render function looks like this:</p>
  
  <pre><code>render() {
      return (
          &lt;View style={{flex: 1, flexDirection: 'column'}}&gt;
              {this.renderLoadingView()}
              {this.renderEmptyView()}
              {this.renderErrorView()}
              {this.renderInterviewListView()}
              {this.renderInterviewFeedbackRequestViews()}
          &lt;/View&gt;
      );
  }
  </code></pre>
  
  <p>But each of the others look something like this where they either render null if they don't meet a number of conditions or they render the view if all are met:</p>
  
  <pre><code>renderLoadingView() {
      if (this.state.showLoading &amp;&amp; !this.state.showError) {
          return (
              &lt;View&gt;
                  [...]
              &lt;/View&gt;
          );
      } else {
          return null;
      }
  }
  
  renderErrorView() {
      if (this.state.showError) {
          return (
              &lt;InterviewsErrorView onRetry={() =&gt; this.onRefresh()}/&gt;
          );
      } else {
          return null;
      }
  }
  
  renderInterviewListView() {
      var showEmpty = this.state.emptyFeedbackRequests &amp;&amp; this.state.emptyInterviews;
      if (this.state.showLoading || this.state.showError || showEmpty) {
          return null;
      } else if (!this.state.emptyFeedbackRequests) {
          return null;
      } else {
          return (
              &lt;View&gt;
                  [...]
              &lt;/View&gt;
          );
      }
  }
  </code></pre>
  
  <p>This feels messy, especially since multiple views depend on the same thing (e.g. whether or not showLoading is true). Is there a way I can simplify this or make it cleaner?</p>