comentarios styling

src/scenes/Clase/Comentarios.js

@@ -35,17 +35,19 @@ class Comentarios extends Component {
 
   renderRespuesta(item) {
     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>
+      <View key={item._id} style={{ flex: 1 }} style={{ flexDirection: 'column' }}>
+		<View>
+			<Image
+				resizeMode='contain' source={{ uri: this.imageUri(item.userid) }}
+				style={{ flex: 1, height: 40 }}
+			/>
+		</View>
+		<View>
+	    	<View style={{ flex: 2, justifyContent: 'center', alignItems: 'center' }}>
+	    		<Text>{item.nombreUsuario}</Text>
+	    		<Text>{item.fecha}</Text>
+	    	</View>
+	    </View>
         <CardSection style={{ backgroundColor: '#eef' }}>
           <Text style={{ color: '#000' }}>{item.texto}</Text>
         </CardSection>
@@ -54,47 +56,38 @@ class Comentarios extends Component {
   }
 
   renderComentario(item) {
+	const moment = require('moment');
+	const fecha = moment(item.fecha).local().format('DD/MM/YY HH:mm');
     const uri = this.imageUri(item.userid);
 
     let Arr = item.respuestas.map(el => {
       return this.renderRespuesta(el);
     });
     if (Arr !== undefined && Arr.length > 0) {
-      Arr = <View style={{ backgroundColor: '#eef' }}>{ Arr}</View>;
+      Arr = <View style={{ backgroundColor: '#eef' }}>{Arr}</View>;
     }
 
     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>
+      <View style={styles.comentario}>
+	    <Image resizeMode='contain' source={{ uri }} style={{ margin: 5, borderRadius: 20, flex: 2, height: 70 }} />
+		<View style={{ flex: 8, flexDirection: 'column' }}>
+			<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
+				<Text style={styles.nombre }>{item.nombreUsuario}</Text>
+				<Text style={styles.fecha}>{fecha}</Text>
+			</View>
+        	<Text style={styles.texto}>{item.texto}</Text>
+		</View>
+      </View>
     );
+	// {Arr}
   }
 
   renderHeader() {
-  	const out = (
-		<View>
-		<Header titulo={this.props.titulo} profesor={this.props.profesor} fecha={this.props.fecha} />
-			{this.renderNewComment()}
-		</View>
-	);
-	return out;
+	return <Header titulo={this.props.titulo} profesor={this.props.profesor} fecha={this.props.fecha} />;
   }
   renderNewComment() {
     return (
-      <Card>
+      <Card style={{ backgroundColor: '#FFF' }}>
         <CardSection>
           <Text style={{ justifyContent: 'center' }}>
             Dejar un comentario
@@ -107,9 +100,7 @@ class Comentarios extends Component {
             style={{ flex: 1 }}
           />
         </CardSection>
-        <CardSection>
-          <Button>Enviar</Button>
-        </CardSection>
+        <Button>Enviar</Button>
       </Card>
   );
   }
@@ -130,12 +121,40 @@ class Comentarios extends Component {
 		<ListView
             enableEmptySections
             renderHeader={this.renderHeader.bind(this)}
+			renderFooter={this.renderNewComment.bind(this)}
             dataSource={this.dataSource}
             renderRow={this.renderComentario.bind(this)}
+			style={{ backgroundColor: '#DDD' }}
 		/>
 	);
   }
 
 }
 
+const styles = {
+	comentario: {
+		flexDirection: 'row', 
+		margin: 5,
+		marginBottom: 0,
+		padding: 5,
+		backgroundColor: '#FFF',
+		borderLeftWidth: 2,
+		borderColor: '#88A'
+	},
+	nombre: {
+		fontSize: 13,
+		color: '#88A',
+		textAlign: 'left',
+		flex: 2
+	},
+	fecha: {
+		fontSize: 10,
+		color: '#AAA',
+		textAlign: 'right',
+		flex: 1
+	},
+	texto: {
+		fontSize: 12,
+	}
+}
 export default Comentarios;

src/scenes/Clase/Header.js

@@ -28,7 +28,7 @@ class Header extends Component {
 		const calendar = require('../../../img/listaClases/calendario.png');
 		const fecha = moment(this.props.fecha).local().format('DD/MM/YY');
 		return (
-			<View style={{ borderWidth: 1, borderColor: '#ddd', padding: 5 }}>
+			<View style={{ borderWidth: 1, borderTopWidth: 0, borderColor: '#ddd', padding: 5, backgroundColor: '#FFF' }}>
 				<Text style={styles.title}>{this.props.titulo}</Text>
 				<CardSection>
 					<View style={styles.infoSection}>