Agrega un avatar de usuario para mostrar en los comentarios

Tenemos un listado de comentarios para cada artista, pero nos gustaría conocer quién escribió cada uno y sería bueno ver una foto suya. Aprovechemos que el servicio de autenticación de Firebase nos proporciona una manera de acceder a la foto de un usuario que haya iniciado sesión.

En el método handleSend de nuestro ArtistDetailView debemos agregar las siguientes líneas para guardar también la foto del usuario y su identificador:

handleSend = () => {
    ...
    newCommentRef.set({
      text,
      userPhoto: photoURL,
      uid
    });
    ...
  }

En nuestro CommentList, en el método render debemos pasarle el avatar a cada renderRow:

return <Comment text={comment.text} avatar={comment.userPhoto} />

Y finalmente en nuestro componente Comment debemos hacer algunas modificaciones para agregar el avatar del usuario. Vamos a agregar una URL para los comentarios que hayan sido hechos antes de que empecemos a grabar los avatares, definiendo una constante llamada DEFAULT_AVATAR:

import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native'

const DEFAULT_AVATAR = 'https://flipagram.com/assets/resources/img/fg-avatar-anonymous-user-retina.png'
const AVATAR_SIZE = 32

const Comment = (props) => 
  <View style={styles.comment}>
    {
      props.avatar ?
        <Image style={styles.avatar} source={{ uri: props.avatar }} /> :
        <Image style={styles.avatar} source={{ uri: DEFAULT_AVATAR }} /> 
    }
    <Text style={styles.text}>{props.text}</Text>
  </View>

const styles = StyleSheet.create({
  comment: {
    backgroundColor: '#ecf0f1',
    padding: 10,
    margin: 5,
    borderRadius: 5,
    flexDirection: 'row',
    alignItems: 'center'
  },
  text: {
    marginLeft: 10,
    fontSize: 16
  },
  avatar: {
    width: AVATAR_SIZE,
    height: AVATAR_SIZE,
    borderRadius: AVATAR_SIZE / 2
  }
})

export default Comment

Si tienes algunas dudas, puedes descargar los archivos en la pestaña de archivos de este video y ver cómo se ven finalmente.

Las funcionalidades de la app ya están cubiertas así que en los siguientes videos vamos a dedicarnos a refinar detalles para dejarla lista para subirla a los Stores.