title: React Native render list of tags in a flatlist next to each other
body: <p>I am building a react-native app and in my settings page I want people to be able to add an item. When I render that item (The items may be different sizes) I want all of them to be rendered next to each other and overflow onto the line below them. I have tried using flexDirection : 'row' but that has not worked. I have also tried setting numColumns but since the items are different sizes, that also does not work.</p>
  
  <p>What I have so far for my flatList:</p>
  
  <pre><code>&lt;FlatList
                showsVerticalScrollIndicator={false}
                numColumns = {3}
                style = {{flex : 1, height : '100%', width : '100%', borderRadius : 20, marginTop : 12,flexDirection : 'row'}}
                data = {[...this.state.classes, 'ADD']}
                renderItem = {({item, index}) =&gt; {
                  return (
                    &lt;View key = {index} style = {{marginHorizontal : 16, marginVertical : 4, alignSelf: 'flex-start',height : 35, backgroundColor : '#f2f2f2', borderRadius : 40, alignItems : "center", justifyContent : "space-between", paddingLeft: 16, paddingRight : 16, flexDirection : 'row'}}&gt;
                      &lt;Text style = {{fontSize : 14, paddingRight : 16,fontFamily : fonts.subtitle, color : "#333"}} &gt;{item}&lt;/Text&gt;
                      &lt;TouchableOpacity onPress = {() =&gt; this.deleteClass(index)} style = {{alignItems : "center", justifyContent : "center", }}&gt;
                        &lt;Ionicons name = "ios-close" size = {20} color = {colors.error}/&gt;
                      &lt;/TouchableOpacity&gt;
                    &lt;/View&gt;
                  )
                }}
                /&gt;
  </code></pre>