I'm currently working on building a messaging interface using a flatlist and a message bubble style from the Nachos-ui UI kit. However, I'm facing some challenges in getting the flatlist to display text bubbles with varying widths based on the length of the text. Initially, when sending a message, the bubble width appears to be adequate:
https://i.sstatic.net/OYO2n.png
But, when sending another message, although not very clear in the images, it alters the width of the previous message and confines the new message within what seems to be a maximum width:
https://i.sstatic.net/0eDwT.png
Below is the code snippet for the flatlist:
<FlatList
data={this.state.messages}
style={{marginLeft: 280}}
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated:true})}
keyExtractor = {item => item.timestamp}
renderItem={({item}) => <Bubble style={{marginTop: 20}} color="#FFC800"
>{item.contents}</Bubble>}
/>
In order to diagnose the issue, it might be useful to also provide the code for the entire component:
<KeyboardAvoidingView style={styles.container}
behavior="padding"
keyboardVerticalOffset={64}>
<KeyboardAvoidingView style={styles.inputContainer}>
<FlatList
data={this.state.messages}
style={{marginLeft: 280}}
ref={ref => this.flatList = ref}
onContentSizeChange={() => this.flatList.scrollToEnd({animated: true})}
onLayout={() => this.flatList.scrollToEnd({animated:true})}
keyExtractor = {item => item.timestamp}
renderItem={({item}) => <Bubble style={{marginTop: 20}} color="#FFC800"
>{item.contents}</Bubble>}
/>
<View style={{flexDirection:'row', backgroundColor: 'transparent'}}>
<Input
containerStyle={{marginVertical: 10, width:300, marginLeft: 20}}
inputStyle={styles.textInput}
keyboardAppearance="dark"
placeholder=""
autoCorrect={false}
onChangeText={(message) => { this.setState({message})}}
value={this.state.message}
/>
<Button
buttonStyle={{borderRadius: 25, marginTop: 40, marginLeft: 10, paddingVertical: 5, backgroundColor: "#9214FF"}}
icon={{name: 'arrow-up', type: 'feather', color:'white'}}
onPress={()=>{Keyboard.dismiss; this.onPressButton()}}
title=""/>
</View>
</KeyboardAvoidingView>
</KeyboardAvoidingView>
Is there a way to make the flatlist render each message with a dynamic size based on the text length without affecting previous messages and without a predefined maximum width?