title: Separator style for header and body in FlatList
body: <p>Currently, I'm having a problem with FlatList.
  I have a component to render a list book.
  By design, the header's width is the width of the screen and the body will be padding left and right 10px.</p>
  
  <p>So I used <code>contentContainerStyle={{paddingHorizontal: 10}}</code>.
  But The result is that the header and body are 10px padding left and right.</p>
  
  <p>Please suggest a way to resolve it. Sorry for my bad English!!</p>
  
  <p><strong>Update:</strong> I'm so sorry for not describing my problem thoroughly.</p>
  
  <p>In <code>main.tsx</code></p>
  
  <pre><code>...
  public render() {
    return (
      &lt;FlatList
        key...
        data={..}
        renderItem={this.renderItems}
        ListHeaderComponent={this.renderHeader}
        contentContainerStyle={styles.contentStyle}
      /&gt;
    );
  }
  
  private renderHeader = () =&gt; {
    return (
      &lt;View style={style.header}
        //TODO something ...
      &lt;/View&gt;
    );
  }
  
  private renderItems: ListRenderItem&lt;IBook&gt; = ({ item: {bookId} }) =&gt; bookId ?
    (
      &lt;BookGridCell
        title={...}
        image={...}
        //TODO more..
      /&gt;
    ) : &lt;View style={styles.emptyBox} /&gt; 
  }
  </code></pre>
  
  <p>At <code>renderItems</code>, I called a component <code>BookGridCell</code>. In this component, the design of a book is set up. So if I directly add style inside <code>renderItems</code>, each book will have a left and right margin of 10px, not the entire body.</p>
  
  <p><strong>When use <code>contentContainerStyle</code></strong>
  <a href="https://i.stack.imgur.com/lLkxI.png" rel="noreferrer">with contenContainerStyle</a></p>
  
  <p><strong>When directly add style inside <code>renderItems</code></strong>
  <a href="https://i.stack.imgur.com/9Mu6X.png" rel="noreferrer">with not use contentContainerStyle</a></p>