Alternative layout

EventTile.js

/* @flow */

import React, { Component } from 'react'
import {
  View,
  Text,
  Image,
  ScrollView,
  StyleSheet,
  Dimensions,
  TouchableHighlight
} from 'react-native'

import { AWS_PREFIX } from '../../config'

import EventView from '../Event'
import {location, lightbulb} from '../../assets/icons'

import type { Event } from '../../schema/Event'

type Props = {
  event: Event,
  goHome: Function,
  navigateTo: Function
}

export default class EventTile extends Component {
  props: Props

  render() {
    const { event } = this.props
    let imageSrc = require('../../assets/event-placeholder.png')
    if (event.imageUri) {
      imageSrc = { uri: event.imageUri }
    }

    const route = {
      key: 'Event',
      component: EventView,
      props: { eventId: event.id, goHome: this.props.goHome }
    }

    const startDate = event.startDate.toLocaleDateString()
    const endDate = event.endDate.toLocaleDateString()

    return (
      <TouchableHighlight onPress={() => this.props.navigateTo(route)}>
        <View style={styles.container}>
          <Image source={imageSrc} style={styles.coverImage}></Image>
          <View style={styles.content}>
            <View style={styles.location}>
              <Image source={location} style={styles.locationIcon} />
              <Text style={styles.locationText}>{ event.location }</Text>
            </View>
            <View style={styles.footer}>
              <View style={styles.footerEventInfo}>
                <Text style={ styles.date }>{startDate} to {endDate}</Text>
                <Text style={styles.title}>{event.name}</Text>
              </View>
            </View>
          </View>
        </View>
      </TouchableHighlight>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    width: Dimensions.get('window').width / 2,
    overflow: 'hidden',
    height: 260,
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    position: 'relative',
  },

  content: {
    flex: 1,
    justifyContent: 'space-between'
  },

  coverImage: {
    flex: 1,
    resizeMode: 'cover',
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  },

  location: {
    flexDirection: 'row',
    backgroundColor: 'transparent',
    top: 10,
    left: 10
  },

  locationIcon: {
    marginRight: 10
  },

  locationText: {
    fontSize: 15,
    color: 'white',
    fontFamily: 'Roboto-Light'
  },

  footer: {
    padding: 10,
    alignSelf: 'stretch',
    backgroundColor: 'rgba(29, 206, 110, 0.9)',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
  },

  footerEventInfo: {
    flexDirection: 'column',
  },

  title: {
    fontSize: 15,
    color: 'white',
    fontFamily: 'Roboto-Bold'
  },

  date: {
    fontSize: 14,
    fontFamily: 'Roboto-Light',
    color: 'white',
    marginBottom: 5
  }
})