title: Style the container of React Native's FlatList items separate from the header / footer?
body: <p>I have a <code>FlatList</code> using the <code>ListHeaderComponent</code> and <code>ListFooterComponent</code>.</p>
  
  <p>Is there a way to style a container of the items (which come from the <code>data</code> prop), but not include the header and footer with in? </p>
  
  <p><a href="https://snack.expo.io/@jamesweblondon/bold-pretzel" rel="noreferrer">https://snack.expo.io/@jamesweblondon/bold-pretzel</a></p>
  
  <pre><code>import React from "react";
  import { View, Text, FlatList } from "react-native";
  
  const exampleData = [...Array(20)].map((d, index) =&gt; ({
    key: `item-${index}`,
    label: index,
    backgroundColor: `rgb(${Math.floor(Math.random() * 255)}, ${
      index * 5
    }, ${132})`,
  }));
  
  const Example = () =&gt; {
    const renderItem = ({ item }) =&gt; {
      return (
        &lt;View
          style={{
            flexDirection: "row",
            width: "100%",
            backgroundColor: item.backgroundColor,
          }}
        &gt;
          &lt;Text
            style={{
              fontWeight: "bold",
              color: "white",
              fontSize: 32,
              height: 100,
            }}
          &gt;
            {item.label}
          &lt;/Text&gt;
        &lt;/View&gt;
      );
    };
  
    return (
      &lt;View style={{ flex: 1 }}&gt;
        &lt;FlatList
          data={exampleData}
          renderItem={renderItem}
          keyExtractor={(item) =&gt; item.key}
          ListHeaderComponent={
            &lt;View
              style={{
                backgroundColor: "grey",
                height: 200,
                justifyContent: "center",
                alignItems: "center",
              }}
            &gt;
              &lt;Text&gt;Before list&lt;/Text&gt;
            &lt;/View&gt;
          }
          ListFooterComponent={
            &lt;View
              style={{
                backgroundColor: "grey",
                height: 200,
                justifyContent: "center",
                alignItems: "center",
              }}
            &gt;
              &lt;Text&gt;After list&lt;/Text&gt;
            &lt;/View&gt;
          }
        /&gt;
        &lt;View
          style={{
            backgroundColor: "gold",
            height: 200,
            justifyContent: "center",
            alignItems: "center",
          }}
        &gt;
          &lt;Text&gt;Footer&lt;/Text&gt;
        &lt;/View&gt;
      &lt;/View&gt;
    );
  };
  
  export default Example;
  
  </code></pre>
  
  <p>Currently it looks like this: </p>
  
  <p><a href="https://i.stack.imgur.com/0Vw6q.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0Vw6q.png" alt="enter image description here"></a></p>
  
  <p>Id like an element allowing me to wrap <code>data</code> so I can add padding, border, etc:</p>
  
  <p><a href="https://i.stack.imgur.com/rnUN1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/rnUN1.png" alt="enter image description here"></a></p>