Estoy creando una aplicación de chat móvil y me encontré con este problema en el que muestro los mensajes como texto dentro de una vista, pero aparentemente no puedo hacer que los mensajes aparezcan en una cierta altura donde quepa dentro de la vista. O bien el mensaje es demasiado largo, por lo que no se mostrará por completo (no hay suficiente espacio en la vista) o el mensaje aparece pero hay muchos espacios después del texto.

Por favor, vea la imagen que describe exactamente el problema:

Aquí está mi código:

1- Vistas :

 if (chat.from !== CurrentUser) { temp_chat.push( <View key={i} style={styles.messageContainer1}> <View style={styles.thisUserText}> <Text style={styles.message}>{chat.msg}</Text> </View> <View style={styles.empty}></View> </View> ); } else { temp_chat.push( <View key={i} style={styles.messageContainer2}> <View style={styles.empty}></View> <View style={styles.otherUserText}> <Text style={styles.message}>{chat.msg}</Text> </View> </View> ); }

2- Estilo:

 messageContainer1: { flexDirection: "row", marginBottom: 10, flex: 1, }, messageContainer2: { flexDirection: "row", justifyContent: "flex-end", marginBottom: 10, flex: 1, }, message: { fontSize: 16, color:"#fff", padding:10 }, empty: { flex: 1, }, thisUserText: { backgroundColor: "#bf0010", // red flex: 1, height: 100, borderRadius: 5, color:"#fff", }, otherUserText: { backgroundColor: "#13283E", // dark blue flex: 2, height: 100, borderRadius: 5, },

Lo que necesito es una altura dinámica para las vistas roja y azul oscuro, para que el texto interior encaje perfectamente, ya sea un texto largo o corto. Cómo puedo conseguir esto ?

Gracias de antemano 🙏