title: How to style React Native FlatList data separately?
body: <p>I have a standard React Native <code>FlatList</code> component that I need to style. I also have a <code>ListHeaderComponent</code> that should have its own separate styles.</p>
  <p>My issue is that I need to style the <code>data</code> part of the <code>FlatList</code> without affecting the <code>ListHeaderComponent</code>.</p>
  <p>I would hope to avoid a &quot;hacky&quot; solution, if possible. I have looked at the <code>FlatList</code> <a href="https://reactnative.dev/docs/flatlist" rel="nofollow noreferrer">documentation</a> and there are no props to achieve this.</p>
  <p>Here is some code for reference</p>
  <pre><code>&lt;FlatList
    data={DATA}
    renderItem={renderItem}
    keyExtractor={(item) =&gt; item.id}
    ListHeaderComponent={&lt;Component /&gt;}
  /&gt;
  </code></pre>
  <p>Worst case, is there anything else I could use to achieve this? Using a <code>ScrollView</code> to wrap the <code>FlatList</code> obviously doesn't work. I need the <code>FlatList</code> just as much as I need the styles of the <code>data</code>.</p>