Envia comentarios de un artista y almacénalos en Firebase

Ya tenemos nuestra aplicación integrada con Firebase: con la autenticación y la base de datos. Podemos marcar nuestros artistas favortios. Ahora vamos a trabajar en la vista del detalle ArtistDetailView para poder agregar comentarios.

De la documentación de React Native vamos a tomar el ejemplo para agregar un TextInput en nuestra vista, debajo del componente de ArtistBox, adaptándolo un poco y envolviéndolo en un View:

<TextInput
          style={styles.input}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text})}
        />

Y agregaremos los estilos necesarios utilizando Flexbox:

inputContainer: {
    position: 'absolute',
    bottom: 0,
    right: 0,
    left: 0,
    height: 50,
    backgroundColor: 'white',
    paddingHorizontal: 10,
    flexDirection: 'row',
    alignItems: 'center'
  },
  input: {
    height: 50,
    flex: 1
  }

No te olvides de importar TextInput y el TouchableOpacity del módulo de 'react-native'

Visualmente nuestro componente de ArtistDetailView queda de la siguiente manera:

render() {
    const artist = this.props.artist

    return (
      <View style={styles.container}>
        <ArtistBox artist={artist} />
        <View style={styles.inputContainer}>
          <TextInput
            style={styles.input}
            placeholder="Opina sobre este artista"
            onChangeText={this.handleChangeText}
          />
          <TouchableOpacity onPress={this.handleSend}>
            <Icon name="ios-send-outline" size={30} color="gray" />
          </TouchableOpacity>
        </View>
      </View>
    );
  }

Para guardar los comentarios en Firebase no contamos con arrays, pero sí tenemos otra forma de hacerlo si seguimos la documentación de Firebase para trabajar con listas. Ahí mismo recomiendan guardar los comentarios en un objeto aparte.

Siguiendo las recomendaciones de Firebase, nuestro método handleSend queda de la siguiente manera:

handleSend = () => {
    const { text } = this.state
    const artistCommentsRef = this.getArtistCommentsRef()
    var newCommentRef = artistCommentsRef.push()
    newCommentRef.set({ text });
  }

Con la consola de Firebase abierta podemos ver los cambios que van sucediendo en tiempo real en los comentarios asociados a un artista.

En el siguiente video veremos cómo listar esos comentarios en la pantalla a medida que se van agregando a la base de datos.