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

import React, { Component } from 'react';
import { Image, Text, View, TouchableOpacity } from 'react-native';
import { Actions } from 'react-native-router-flux';
import { CardSection } from '../../components/common';
import Icon from 'react-native-vector-icons/Ionicons'

class Header extends Component {
	renderProf(p) {
		if ( p === undefined )
			return null;
		if (!Array.isArray(p))
			p = [ p ];
		const out = p.map( e => {
				return (
					<TouchableOpacity key={e._id} onPress={() => Actions.ViewProf({ id: e._id})}>
						<Text style={styles.info}>
							{e.nombre} {e.apellido}
						</Text>
					</TouchableOpacity>
				);
		});
		return <View style={{ flexDirection: 'column' }}>{out}</View>;
	}

	render() {
		const moment = require('moment');
		const professor = require('../../../img/listaClases/profesor.png');
		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 }}>
				<Text style={styles.title}>{this.props.titulo}</Text>
				<CardSection>
					<View style={styles.infoSection}>
						<Icon name='ios-person-outline' style={styles.icon} />
						{this.renderProf(this.props.profesor)}
					</View>

					<View style={styles.infoSection}>
						<Icon name='ios-calendar-outline' style={styles.icon} />
						<Text style={styles.info}>{fecha}</Text>
					</View>

					<View style={styles.infoSection}>
						<Icon name='ios-help-outline' style={styles.icon} />
						<Text style={styles.info}>Sin Resolver</Text>
					</View>
		      	</CardSection>
			</View>
		);
	}

}

const styles = {
	title: {
		color: '#000',
		fontWeight: '600',
		fontSize: 11
	},
	info: {
		color: '#88A',
		fontSize: 11
	},
	icon: {
		fontSize: 18,
		marginRight: 5
	},
	infoSection: {
		flex: 1,
		flexDirection: 'row',
		alignItems: 'center'
	}
};

export default Header;