-More!

app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.container.js

@@ -0,0 +1,18 @@
+import { connect } from 'react-redux';
+
+import { getActiveEvent, getDefaultEvent } from '../selectors/events.js';
+
+import EventTitle from './EventTitle.js';
+
+const matchStateToProps = (state) => {
+  const event = hasActiveEvent(state) ? getActiveEvent(state) : getDefaultEvent(state);
+
+  return {
+    date: event.get('date'),
+    end: event.get('end'),
+    name: event.get('name'),
+    start: event.get('start'),
+  };
+};
+
+export default connect(matchStateToProps, null)(EventTitle);

app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+    Text,
+    TouchableOpacity,
+    View,
+} from 'react-native';
+
+import styles from './EventTitle.styles.js';
+
+export default function EventTitle({
+  action,
+  date,
+  end,
+  name,
+  start,
+}) {
+   const _generateEventTitle = () => (
+    <View style={styles.eventInfo}>
+      <Text style={styles.eventName}>{name}</Text>
+      <Text style={styles.eventDate}>{`${date} | ${start} - ${end}`}</Text>
+    </View>
+  );
+
+  if (action) {
+    return <TouchableOpacity onPress={action}>{_generateEventTitle()}</TouchableOpacity>;
+  }
+
+  return _generateEventTitle();
+}
+
+EventTitle.propTypes = {
+  action: PropTypes.func,
+  date: PropTypes.string.isRequired,
+  end: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  start: PropTypes.string.isRequired,
+};
+
+EventTitle.defaultProps = {
+  action: null,
+};

app/components/AppHeader/HeaderTitle/EventTitle/EventTitle.styles.js

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+export default const styles = StyleSheet.create({
+  eventInfo: {
+    flexDirection: 'row',
+  },
+  eventName: {
+    flex: 1,
+    fontWeight: 'bold',
+  },
+  eventDate: {
+    flex: 1,
+  },
+});
+