title: React Native Flatlist won't render item's width dynamically
body: <p>I am trying to create a messaging interface using a flatlist and a message bubble style from the ui kit nachos-ui, but I am having trouble getting the flatlist to render different widths of the text bubbles based on the amount of text.  Whenever I first send a message, the bubble seems to be a decent width:</p>
  
  <p><a href="https://i.stack.imgur.com/OYO2n.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OYO2n.png" alt="enter image description here"></a></p>
  
  <p>However whenever I send another message, although its hard to see in these pictures, it changes the width of the previous message and constricts the new message to what seems to be a maximum width</p>
  
  <p><a href="https://i.stack.imgur.com/0eDwT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0eDwT.png" alt="enter image description here"></a></p>
  
  <p>Here is my code for the flatlist:</p>
  
  <pre><code>&lt;FlatList
            data={this.state.messages}
            style={{marginLeft: 280}}
            ref={ref =&gt; this.flatList = ref}
            onContentSizeChange={() =&gt; this.flatList.scrollToEnd({animated: true})}
            onLayout={() =&gt; this.flatList.scrollToEnd({animated:true})}
            keyExtractor = {item =&gt; item.timestamp}
            renderItem={({item}) =&gt; &lt;Bubble style={{marginTop: 20}} color="#FFC800"
             &gt;{item.contents}&lt;/Bubble&gt;}
          /&gt;
  </code></pre>
  
  <p>Also the code for the whole component might be helpful to diagnose the problem:</p>
  
  <pre><code>&lt;KeyboardAvoidingView style={styles.container} 
        behavior="padding"
        keyboardVerticalOffset={64}&gt;
        &lt;KeyboardAvoidingView style={styles.inputContainer}&gt;
  
        &lt;FlatList
            data={this.state.messages}
            style={{marginLeft: 280}}
            ref={ref =&gt; this.flatList = ref}
            onContentSizeChange={() =&gt; this.flatList.scrollToEnd({animated: true})}
            onLayout={() =&gt; this.flatList.scrollToEnd({animated:true})}
            keyExtractor = {item =&gt; item.timestamp}
            renderItem={({item}) =&gt; &lt;Bubble style={{marginTop: 20}} color="#FFC800"
             &gt;{item.contents}&lt;/Bubble&gt;}
          /&gt;
        &lt;View style={{flexDirection:'row', backgroundColor: 'transparent'}}&gt;
        &lt;Input
          containerStyle={{marginVertical: 10, width:300, marginLeft: 20}}
          inputStyle={styles.textInput}
          keyboardAppearance="dark"
          placeholder=""
          autoCorrect={false}
          onChangeText={(message) =&gt; { this.setState({message})}}
          value={this.state.message}
          /&gt;
          &lt;Button 
            buttonStyle={{borderRadius: 25, marginTop: 40, marginLeft: 10, paddingVertical: 5, backgroundColor: "#9214FF"}}
            icon={{name: 'arrow-up', type: 'feather', color:'white'}}
            onPress={()=&gt;{Keyboard.dismiss; this.onPressButton()}} 
            title=""/&gt; 
          &lt;/View&gt;
          &lt;/KeyboardAvoidingView&gt;
        &lt;/KeyboardAvoidingView&gt;
  </code></pre>
  
  <p>How do I get the flatlist to render each message with a dynamic size based on the amount of text submitted without changing any previous messages, and without a predetermined maximum width?</p>