title: How to Wrap Flatlist items in React Native
body: <p>I am trying to render the list of items like in this image.
  <a href="https://i.stack.imgur.com/5Uszy.png" rel="noreferrer"><img src="https://i.stack.imgur.com/5Uszy.png" alt="enter image description here"></a></p>
  
  <p>Items in each row will vary based on their text size. <a href="https://facebook.github.io/react-native/docs/flatlist" rel="noreferrer">Flatlist</a> is using for rendering items.</p>
  
  <p><strong>TagView.js</strong></p>
  
  <pre><code>&lt;View style={styles.tagView}&gt;
      &lt;FlatList 
          scrollEventThrottle={1900} 
          data={this.state.interests} 
          numColumns={5}
          renderItem={({ item }) =&gt; (
             &lt;View style={styles.tag}&gt;
                 &lt;Text&gt;{item.tagName}&lt;/Text&gt;
             &lt;/View&gt;
          )}
          keyExtractor={(item, index) =&gt; index}
          contentContainerStyle={{ paddingBottom: 100 }}
      /&gt;
  &lt;/View&gt;
  </code></pre>
  
  <p><strong>Style</strong></p>
  
  <pre><code>tagView: {
      flex: 1,
      flexDirection: "row",
      flexWrap: "wrap"
  },
  tag: {
      borderWidth: 1,
      borderRadius: 10,
      borderColor: "black",
      backgroundColor: "white",
      padding: 3,
      marginTop: 5
  }
  </code></pre>
  
  <p><strong>Result</strong></p>
  
  <p><a href="https://i.stack.imgur.com/fja5b.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/fja5b.jpg" alt="enter image description here"></a></p>
  
  <p>But here items are not wrapping with device width. Is there any to wrap the contents?</p>