Agregar hace tiempo a React Native Elements ListItem

Agregar hace tiempo a React Native Elements ListItem

Usé React Native Elements ListItem para renderizar mis elementos del FlatList. Quiero establecer el texto de tiempo atrás (por ejemplo, hace 20 minutos) en la misma línea que el título. Pero cuando configuro el número de líneas del subtítulo en 5, el texto de hace tiempo llega a la fila del subtítulo. ¿Cómo puedo solucionar esto?

<FlatList
  data={this.props.data}
  renderItem={({item}) => (
    <ListItem
      roundAvatar={true}
      avatar={{uri: item.picture.thumbnail}}
      title={`${item.name.first} ${item.name.last}`}
      titleStyle={styles.title}
      rightTitle="20 Minutes Ago"
      rightTitleStyle={styles.rightTitle}
      rightTitleContainerStyle={styles.rightTitleContainer}
      //  subtitle="This is a sample comment which was commented by the developer."
      subtitleStyle={styles.subtitle}
      subtitleContainerStyle={styles.subtitleContainer}
      subtitleNumberOfLines={5}
      hideChevron={true}
      containerStyle={styles.flatListContainer}
    />
  )}
  keyExtractor={item => item.email}
  ItemSeparatorComponent={this.seperator}
  onRefresh={this.handleRefresh}
  refreshing={this.props.refreshing}
  onEndReached={this.handleLoadMore}
  onEndReachedThreshold={50}
/>
Mostrar la mejor respuesta

¿Puedes publicar el styles para el ListItem, también quieres establecer subtítulos o no?

Quiero tener 5 líneas para el subtítulo. El subtítulo es para el comentario. const estilos = StyleSheet.create({ contenedor: { flex: 1 }, listItemContainer: { flex: 1, borderBottomWidth: 0 }, separador: { altura: 1, ancho: "86%", backgroundColor: "#CED0CE", marginLeft : "12%" }, título: { marginLeft: 5, fontSize: 16, fontWeight: "600", color: "black" }, subtítulo: { marginLeft: 5, fontSize: 14, fontWeight: "normal" }, rightTitle : { color: "gris", tamaño de fuente: 12 } });

El centrado vertical es el comportamiento predeterminado de rightTitle como docs say

proporcione un rightTitle para que aparezca un título en el lado derecho del botón

Para esto puedes agregar el rightTitleContainerStyle como

{position: 'absolute', top: (YOUR_TITLE_FONT_SIZE - YOUR_RIGHT_TITLE_FONT_SIZE) / 2, right: 0}

Muchas gracias Pritish. Pasé todo el día para arreglar esto. Hay un pequeño problema. Quiero aumentar el tamaño del avatar. El avatar debe ser redondo. Pero cuando aumento el tamaño, se vuelve cuadrado. ¿Cómo puedo resolverlo?

Sería genial si pudieras publicar una pregunta para eso también, con los estilos relevantes para el avatar.

Este es el enlace para la nueva pregunta Pritish. stackoverflow.com/questions/49696311/…

Sí, he dado una respuesta a esa.

Funcionó como explicaste. Gracias Pritish. Hice otra pregunta aquí. stackoverflow.com/questions/49719835/… ¿Podría ayudarnos?

Es posible que deba agregar el código relevante para ese ejemplo.