soy nuevo en reaccionar nativo y estoy tratando de hacer un diseño de aplicación de chat.

Como puede ver en la captura de pantalla que he adjuntado, quiero que el cuadro de texto ocupe tanto espacio como el texto que contiene. Por ejemplo, si envío 'Hola', solo debe extenderse tanto espacio como necesite 'Hola'. Si envío un texto largo, entonces debería estirarse y ocupar tanto espacio como ese texto. Como sucede en casi todas las aplicaciones de mensajes de texto.

El código del cuadro de texto es:

 <TouchableOpacity> <View style={styles.containerSent}> <View style={{flex: 3}}> <Text style={styles.message}>{item.message}</Text> </View> <View style={{flex: 1}}> <Image source={require('../assets/images/check.png')} style={styles.image} /> <Text style={{textAlign: 'right', color: 'white'}}> {msToTime(item.timestamp)} </Text> </View> </View> </TouchableOpacity>

hoja de estilo

 containerSent: { flex: 1, maxWidth: '70%', // minWidth: '30%', marginTop: 20, paddingTop: 20, paddingHorizontal: 10, paddingBottom: 10, borderWidth: 1, backgroundColor: '#6F2232', borderRadius: 20, alignSelf: 'flex-end', flexDirection: 'row', justifyContent: 'space-between', // justifyContent: 'flex-end', }, message: { color: 'white', fontSize: 15, fontWeight: 'bold', textAlign: 'left', alignSelf: 'stretch', }, image: { width: 15, height: 15, marginLeft: 20, marginBottom: 5, alignSelf: 'flex-end', },