title: React native Flatlist grid and item header
body: <p>I want to custom a screen same:
  <a href="https://i.stack.imgur.com/aZLaQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aZLaQ.png" alt="enter image description here"></a></p>
  
  <p>so I use Flastlist and check if the item is header I will set with item = window.with and if not width item = window.width/3. But its error.
  Here is my code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { width, height } = Dimensions.get("window")
  class App extends React.Component {
      constructor() {
          super()
          this.state = {
              data: [
                  { name: "Movies", header: true },
                  { name: "Interstellar", header: false },
                  { name: "Dark Knight", header: false },
                  { name: "Pop", header: false },
                  { name: "Music", header: true },
                  { name: "Adams", header: false },
                  { name: "Nirvana", header: false },
                  { name: "Amrit Maan", header: false },
                  { name: "Oye Hoye", header: false },
                  { name: "Eminem", header: false },
                  { name: "Places", header: true },
                  { name: "Jordan", header: false },
                  { name: "Punjab", header: false },
                  { name: "Ludhiana", header: false },
                  { name: "Jamshedpur", header: false },
                  { name: "India", header: false },
                  { name: "People", header: true },
                  { name: "Jazzy", header: false },
                  { name: "Appie", header: false },
                  { name: "Baby", header: false },
                  { name: "Sunil", header: false },
                  { name: "Arrow", header: false },
                  { name: "Things", header: true },
                  { name: "table", header: false },
                  { name: "chair", header: false },
                  { name: "fan", header: false },
                  { name: "cup", header: false },
                  { name: "cube", header: false }
              ],
              stickyHeaderIndices: []
          };
      }
      renderItem(item) {
          if (item.header) {
              return (
                  &lt;View style={{ width: width, height: 40, backgroundColor: 'green' }}&gt;
                      &lt;Text&gt;{item.name}&lt;/Text&gt;
                  &lt;/View&gt;
              )
          } else {
              return (
                  &lt;View style={{
                      width: width / 3,
                      height: width / 3,
                      backgroundColor: 'white',
                      borderWidth: 1,
                      borderColor: 'gray'
                  }}&gt;
                      &lt;Text&gt;{item.name}&lt;/Text&gt;
                  &lt;/View&gt;
              )
          }
      }
      render() {
          return (
              &lt;View style={{ flex: 1, backgroundColor: 'red' }}&gt;
  
                  &lt;FlatList
                      data={this.state.data}
                      renderItem={({ item }) =&gt; (
                          this.renderItem(item)
                      )}
                      keyExtractor={item =&gt; item.name}
  
                  /&gt;
              &lt;/View&gt;
          );
      }
  }
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>and my result
  <a href="https://i.stack.imgur.com/yJ7CE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yJ7CE.png" alt="enter image description here"></a>
  I have the error: an item isn't header is a row, but I want to show 3 item in a row.</p>
  
  <p>When added number column = 3 in flastlist with code :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> &lt;FlatList
    numColumns={3}
    data={this.state.data}
    renderItem={({ item }) =&gt; (this.renderItem(item))}
    keyExtractor={item =&gt; item.name}
  /&gt;</code></pre>
  </div>
  </div>
  
  I have result
  <a href="https://i.stack.imgur.com/EqgoI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EqgoI.png" alt="enter image description here"></a></p>
  
  <p>How can I fix show 3 item in a row?
  Thank you very much.</p>