title: How could I structure this React Native Section List implementation
body: <p>So I want to use RN Section list in a sort of unorthodox way. </p>
  
  <p>I want the section list to pass off rendering to a component as the renderings won't be very uniform.</p>
  
  <p>I want to use section list so as you scroll you still get to see the headers.</p>
  
  <p>I made a component that takes in children and renders them in a section list like so:</p>
  
  <pre><code>class SomeSectionList extends Component {
  
      render() {
          let sections = React.Children.map(this.props.children, (Child, index) =&gt; {
              return {title: Child.type.title, data: [''], renderItem: () =&gt; Child, index }
      });
  
          return (
              &lt;SectionList
  
                  renderSectionHeader={({section}) =&gt; {
                      return &lt;Text style={{ fontWeight: "bold" }}&gt;{section.title}&lt;/Text&gt;
          }}
                  sections={sections}
                  keyExtractor={(item, index) =&gt; item + index}
              /&gt;
          );
      }
  }
  
  </code></pre>
  
  <p>And the usage would be something like:</p>
  
  <pre><code>                &lt;SomeSectionList&gt;
                      &lt;Comp1 /&gt;
                      &lt;Comp2 /&gt;
                  &lt;/SomeSectionList&gt;
  </code></pre>
  
  <p>However, my issue is. Say in this case Comp1 does not render anything from it's component, I want to be able to hide it's section from the section list. </p>
  
  <p>How could the <code>SomeSectionList</code> component know that it didn't render anything or didn't have the data to render anything so it can hide it's section and it's header?</p>
  
  <p>Any suggestions would be great. I feel like using SectionList for this is overkill (but it makes showing the headers nicer) so open to alternatives as well. </p>