plataforma-mobile/src/scenes/Clase/Comentarios.js

import React, { Component } from 'react';
import { Text, ListView, View, TouchableOpacity, Image, TextInput } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { Card, CardSection, Button } from '../../components/common';

class Comentarios extends Component {

  componentWillMount() {
    this.createDataSource(this.props);
	}

	componentWillReceiveProps(nextProps) {
		this.createDataSource(nextProps);
	}

  createDataSource({comentarios, respuestas}){
    const ds = new ListView.DataSource({
      rowHasChanged: (r1,r2) => r1 !== r2
    });

    let c = comentarios.map(function(el) {
      el.respuestas = respuestas.filter(function(r){
        return (r.parent == el._id);
      })
      return el;
    });
    console.log(c);
    this.dataSource = ds.cloneWithRows(c);
	}

  imageUri(id) {
    return `https://plataforma.especificosba.com.ar/images/perfiles/${id}.jpg`;
  }

  renderRespuesta(item, key) {
    return (
      <View key={item._id} style={{flex:1}}>
        <View style={{flexDirection: 'row'}}>
          <Image resizeMode='contain' source={{ uri: this.imageUri(item.userid) }} style={{flex:1, height:40}}/>
          <View style={{flex:2, justifyContent: 'center', alignItems:'center'}}>
            <Text>{item.nombreUsuario}</Text>
            <Text>{item.fecha}</Text>
          </View>
        </View>
        <CardSection>
          <Text>{item.texto}</Text>
        </CardSection>
      </View>
    );
  }
  renderComentario(item) {
    const uri = this.imageUri(item.userid);

    let Arr = item.respuestas.map( el => {
      return this.renderRespuesta(el);
    });
    if ( Arr != undefined && Arr.length > 0 ) {
      Arr = (
        <CardSection style={{backgroundColor:'#eef'}}>
          {Arr}
        </CardSection>);
    }

    return (
      <Card>

        <CardSection>
          <Image resizeMode='contain' source={{ uri }} style={{flex:1, height:70}}/>
          <View style={{flex:2, justifyContent: 'center', alignItems:'center'}}>
            <Text style={{alignSelf:'center'}}>{item.nombreUsuario}</Text>
            <Text style={{alignSelf:'center'}}>{item.fecha}</Text>
          </View>
        </CardSection>

        <CardSection>
          <Text>{item.texto}</Text>
        </CardSection>

        {Arr}
      </Card>
    );
  }

  renderNewComment() {
    return (
      <Card>
        <CardSection>
          <Text style={{justifyContent:'center'}}>
            Dejar un comentario
          </Text>
        </CardSection>
        <CardSection>
          <TextInput
            autoCorrect={true}
            multiline={true}
            style={{flex:1}}
          />
        </CardSection>
        <CardSection>
          <Button>Enviar</Button>
        </CardSection>
      </Card>
  );
  }
  render() {
    if (this.props.comentarios === undefined ||
        this.props.comentarios.length == 0 ) {
          return (
            <View style={{margin:10}}>
              {this.renderNewComment()}
              <Text style={{fontSize:14,alignSelf:'center'}}>
                Aún no hay comentarios
              </Text>
            </View>
          );
    }

    return (
          <ListView
            enableEmptySections
            renderHeader={this.renderNewComment}
            dataSource={this.dataSource}
            renderRow={this.renderComentario.bind(this)}
            />
		);
  }

}

export default Comentarios;